當前位置:才華齋>設計>網頁設計>

用javascript實現圖片模糊到清晰載效果指南

網頁設計 閱讀(1.33W)

1.背景介紹

用javascript實現圖片模糊到清晰載效果指南

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

2.現狀

現在載入照片的方法主要有一下兩種:

(1)最原始的方式在html頁面直接用img標籤載入顯示照片。該方法在網路速度比較慢或者要顯示的照片比較大的'時候會頁面出現空白的等待過程,並且不能開始給使用者看到照片大概的情況,使用者體驗比較不好。

(2)在html頁面先用img標籤載入顯示照片的縮圖,同時用javascript隱藏的載入照片的原圖,等照片大圖載入完成後再將原圖顯示到頁面中。以下是流程圖:

3.我們的解決方案

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

(1)示例圖

如上如所示,本方法的處理步驟是:

1).獲取照片縮圖和原圖的URL,獲取照片的長和寬;

2).載入並顯示照片縮圖,將縮圖按照片的長和寬拉伸顯示,這時使用者看到的是模糊的效果;

3).載入並顯示照片原圖,將原圖疊加在縮圖上面顯示,原圖載入多少就顯示多少,沒有載入的還是顯示縮圖,逐步將縮圖覆蓋掉,原圖在載入的過程中使用者看到的是照片從模糊到清晰的漸變效果。

4).原圖載入完後,原圖已經全部將縮圖覆蓋,這時使用者看到的是真實的原圖。此時可以隱藏縮圖防止縮圖干擾PNG或GIF等有透明效果的圖片顯示。

(2)示例程式碼