- 相關(guān)推薦
用javascript實現(xiàn)圖片模糊到清晰載效果指南
1.背景介紹
在網(wǎng)絡(luò)相冊應(yīng)用中用戶查看照片是最樸素的需求，當網(wǎng)絡(luò)比較慢的時候查看照片等待的時間是比較長的，用戶體驗會很差。
2.現(xiàn)狀
現(xiàn)在加載照片的方法主要有一下兩種：
（1）最原始的方式在html頁面直接用img標簽加載顯示照片。該方法在網(wǎng)絡(luò)速度比較慢或者要顯示的照片比較大的時候會頁面出現(xiàn)空白的等待過程，并且不能開始給用戶看到照片大概的情況，用戶體驗比較不好。
（2）在html頁面先用img標簽加載顯示照片的縮略圖，同時用javascript隱藏的加載照片的原圖，等照片大圖加載完成后再將原圖顯示到頁面中。以下是流程圖：
3.我們的解決方案
QQ相冊最近做的一些優(yōu)化方法解決了上訴兩個方法的缺點和滿足了用戶查看照片的需求：第一時間看到照片大概情況和盡可能快的看到清晰的原圖。該方法使用縮略圖和原圖同時加載并疊加顯示，先加載縮略圖并拉大顯示，大圖疊加在縮略圖上面同時加載。縮略圖很小通常很快就能給用戶看到照片模糊的效果，大圖加載過程中從上往下逐步覆蓋縮略圖，這樣用戶就可以看到加載過程中的大圖。
（1）示例圖
如上如所示，本方法的處理步驟是：
1).獲取照片縮略圖和原圖的URL，獲取照片的長和寬；
2).加載并顯示照片縮略圖，將縮略圖按照片的長和寬拉伸顯示，這時用戶看到的是模糊的效果；
3).加載并顯示照片原圖，將原圖疊加在縮略圖上面顯示，原圖加載多少就顯示多少，沒有加載的還是顯示縮略圖，逐步將縮略圖覆蓋掉，原圖在加載的過程中用戶看到的是照片從模糊到清晰的漸變效果。
4).原圖加載完后，原圖已經(jīng)全部將縮略圖覆蓋，這時用戶看到的是真實的原圖。此時可以隱藏縮略圖防止縮略圖干擾PNG或GIF等有透明效果的圖片顯示。
（2）示例代碼
【用javascript實現(xiàn)圖片模糊到清晰載效果指南】相關(guān)文章：
有關(guān)javascript實現(xiàn)的多個層切換效果通用函數(shù)示例10-07
關(guān)于jquery簡單圖片切換顯示效果實現(xiàn)方法介紹10-01
JavaScript實現(xiàn)網(wǎng)頁刷新代碼段08-07
常用排序算法之JavaScript實現(xiàn)代碼段06-04
JavaScript 小型打飛機游戲?qū)崿F(xiàn)和原理說明08-18
flash怎么給圖片制作伸縮動畫效果09-13
關(guān)jQuery彈出窗口簡單實現(xiàn)代碼-javascript編程06-07
