快捷導(dǎo)航

Javascript實(shí)現(xiàn)圖片加載從模糊到清晰顯示的方法

更新時(shí)間：2016年06月21日 12:03:11 作者：沫魚

這篇文章主要介紹了使用Javascript實(shí)現(xiàn)圖片加載從模糊到清晰顯示的方法,通俗易懂,需要的朋友可以參考下。

1.背景介紹

在網(wǎng)絡(luò)相冊(cè)應(yīng)用中用戶查看照片是最樸素的需求，當(dāng)網(wǎng)絡(luò)比較慢的時(shí)候查看照片等待的時(shí)間是比較長(zhǎng)的，用戶體驗(yàn)會(huì)很差。

2.現(xiàn)狀

現(xiàn)在加載照片的方法主要有一下兩種：
（1）最原始的方式在html頁(yè)面直接用img標(biāo)簽加載顯示照片。該方法在網(wǎng)絡(luò)速度比較慢或者要顯示的照片比較大的時(shí)候會(huì)頁(yè)面出現(xiàn)空白的等待過(guò)程，并且不能開始給用戶看到照片大概的情況，用戶體驗(yàn)比較不好
（2）在html頁(yè)面先用img標(biāo)簽加載顯示照片的縮略圖，同時(shí)用javascript隱藏的加載照片的原圖，等照片大圖加載完成后再將原圖顯示到頁(yè)面中。以下是流程圖：

3.我們的解決方案

QQ相冊(cè)最近做的一些優(yōu)化方法解決了上訴兩個(gè)方法的缺點(diǎn)和滿足了用戶查看照片的需求：第一時(shí)間看到照片大概情況和盡可能快的看到清晰的原圖。該方法使用縮略圖和原圖同時(shí)加載并疊加顯示，先加載縮略圖并拉大顯示，大圖疊加在縮略圖上面同時(shí)加載。縮略圖很小通常很快就能給用戶看到照片模糊的效果，大圖加載過(guò)程中從上往下逐步覆蓋縮略圖，這樣用戶就可以看到加載過(guò)程中的大圖。

（1）示例圖

如上如所示，本方法的處理步驟是：
1).獲取照片縮略圖和原圖的URL，獲取照片的長(zhǎng)和寬；
2).加載并顯示照片縮略圖，將縮略圖按照片的長(zhǎng)和寬拉伸顯示，這時(shí)用戶看到的是模糊的效果；
3).加載并顯示照片原圖，將原圖疊加在縮略圖上面顯示，原圖加載多少就顯示多少，沒(méi)有加載的還是顯示縮略圖，逐步將縮略圖覆蓋掉，原圖在加載的過(guò)程中用戶看到的是照片從模糊到清晰的漸變效果。
4).原圖加載完后，原圖已經(jīng)全部將縮略圖覆蓋，這時(shí)用戶看到的是真實(shí)的原圖。此時(shí)可以隱藏縮略圖防止縮略圖干擾PNG或GIF等有透明效果的圖片顯示。

（2）示例代碼

<!--設(shè)置照片的大小-->
<div style="width:400px;height:300px;">
    <!--小圖拉大顯示-->
    <img src="small_url" style="width:100%;height:100%;"/>
    <!--原圖疊加在小圖上面-->
    <img src="big_url" style="width:100%;height:100%;position:absolute;top:0px;left:0px;"/>
</div>

以上就是本文的全部?jī)?nèi)容，了解更多JavaScript的語(yǔ)法，大家可以查看：《JavaScript 參考教程》、《JavaScript代碼風(fēng)格指南》，也希望大家多多支持腳本之家。

您可能感興趣的文章: