Javascript實現圖片載入從模糊到清晰顯示的方法_javascript技巧

1.背景介紹

在網路相簿應用中使用者查看照片是最樸素的需求，當網路比較慢的時候查看照片等待的時間是比較長的，使用者體驗會很差。

2.現狀

現在載入照片的方法主要有一下兩種：
（1）最原始的方式在html頁面直接用img標籤載入顯示照片。該方法在網路速度比較慢或者要顯示的照片比較大的時候會頁面出現空白的等待過程，並且不能開始給使用者看到照片大概的情況，使用者體驗比較不好
（2）在html頁面先用img標籤載入顯示照片的縮圖，同時用javascript隱藏的載入照片的原圖，等照片大圖載入完成後再將原圖顯示到頁面中。以下是流程圖：

3.我們的解決方案

QQ相簿最近做的一些最佳化方法解決了上訴兩個方法的缺點和滿足了使用者查看照片的需求：第一時間看到照片大概情況和儘可能快的看到清晰的原圖。該方法使用縮圖和原圖同時載入併疊加顯示，先載入縮圖並拉大顯示，大圖疊加在縮圖上面同時載入。縮圖很小通常很快就能給使用者看到照片模糊的效果，大圖載入過程中從上往下逐步覆蓋縮圖，這樣使用者就可以看到載入過程中的大圖。

（1）樣本圖

如上如所示，本方法的處理步驟是：
1).擷取照片縮圖和原圖的URL，擷取照片的長和寬；
2).載入並顯示照片縮圖，將縮圖按照片的長和寬展開顯示，這時使用者看到的是模糊的效果；
3).載入並顯示照片原圖，將原圖疊加在縮圖上面顯示，原圖載入多少就顯示多少，沒有載入的還是顯示縮圖，逐步將縮圖覆蓋掉，原圖在載入的過程中使用者看到的是照片從模糊到清晰的漸層效果。
4).原圖載入完後，原圖已經全部將縮圖覆蓋，這時使用者看到的是真實的原圖。此時可以隱藏縮圖防止縮圖幹擾PNG或GIF等有透明效果的圖片顯示。

（2）範例程式碼

<!--設定照片的大小--><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>

以上就是本文的全部內容，瞭解更多JavaScript的文法，大家可以查看：《JavaScript 參考教程》、《JavaScript代碼風格指南》，也希望大家多多支援雲棲社區。