Javascript實現(xiàn)圖片加載從模糊到清晰顯示的方法
1.背景介紹
在網(wǎng)絡相冊應用中用戶查看照片是最樸素的需求，當網(wǎng)絡比較慢的時候查看照片等待的時間是比較長的，用戶體驗會很差。
2.現(xiàn)狀
現(xiàn)在加載照片的方法主要有一下兩種：
（1）最原始的方式在html頁面直接用img標簽加載顯示照片。該方法在網(wǎng)絡速度比較慢或者要顯示的照片比較大的時候會頁面出現(xiàn)空白的等待過程，并且不能開始給用戶看到照片大概的情況，用戶體驗比較不好
（2）在html頁面先用img標簽加載顯示照片的縮略圖，同時用javascript隱藏的加載照片的原圖，等照片大圖加載完成后再將原圖顯示到頁面中。以下是流程圖：
3.我們的解決方案
QQ相冊最近做的一些優(yōu)化方法解決了上訴兩個方法的缺點和滿足了用戶查看照片的需求：第一時間看到照片大概情況和盡可能快的看到清晰的原圖。該方法使用縮略圖和原圖同時加載并疊加顯示，先加載縮略圖并拉大顯示，大圖疊加在縮略圖上面同時加載?？s略圖很小通常很快就能給用戶看到照片模糊的效果，大圖加載過程中從上往下逐步覆蓋縮略圖，這樣用戶就可以看到加載過程中的大圖。
（1）示例圖
如上如所示，本方法的處理步驟是：
1).獲取照片縮略圖和原圖的URL，獲取照片的長和寬；
2).加載并顯示照片縮略圖，將縮略圖按照片的長和寬拉伸顯示，這時用戶看到的是模糊的效果；
3).加載并顯示照片原圖，將原圖疊加在縮略圖上面顯示，原圖加載多少就顯示多少，沒有加載的還是顯示縮略圖，逐步將縮略圖覆蓋掉，原圖在加載的過程中用戶看到的是照片從模糊到清晰的漸變效果。
4).原圖加載完后，原圖已經(jīng)全部將縮略圖覆蓋，這時用戶看到的是真實的原圖。此時可以隱藏縮略圖防止縮略圖干擾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代碼風格指南》，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了如何利用HTML+CSS+JavaScript實現(xiàn)一個簡單的網(wǎng)頁版的猜數(shù)字小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JavaScript拖拽、碰撞、重力及彈性運動實現(xiàn)方法,涉及JavaScript數(shù)學運算結合時間函數(shù)實現(xiàn)運動效果的相關技巧,需要的朋友可以參考下2016-01-01
javascript實現(xiàn)iframe框架延時加載的方法
這篇文章主要介紹了javascript實現(xiàn)iframe框架延時加載的方法,可基于setTimeout實現(xiàn)這一功能,是非常實用的技巧,需要的朋友可以參考下2014-10-10
JavaScript組合模式Composite Pattern
這篇文章主要介紹了學習理解JavaScript組合模式，組合模式及Composite Pattern又叫部分整體模式，是用于把一組相似的對象當作一個單一的對象2022-04-04
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)字符雨效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
純JavaScript模仿微信打飛機游戲，做網(wǎng)頁小游戲的借鑒下，界面設計是豎長形仿手機屏幕風格，游戲效果流暢，通過本篇文章給大家分享純js如何實現(xiàn)模仿微信打飛機小游戲，需要的朋友可以參考下2015-08-08
javascript實現(xiàn)日期三級聯(lián)動下拉框選擇菜單
這篇文章主要介紹了javascript實現(xiàn)日期三級聯(lián)動下拉框選擇菜單，實現(xiàn)JS年月日三級聯(lián)動下拉框選擇功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
javascript之分片上傳，斷點續(xù)傳的實際項目實現(xiàn)詳解
在本篇文章里小編給大家整理了關于javascript之分片上傳，斷點續(xù)傳的實際項目實現(xiàn)的詳細內容，有需要的朋友們學習下。2019-09-09
下面小編就為大家?guī)硪黄狝sp.Net之JS生成分頁條的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要為大家詳細介紹了JS面向對象之單選框實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01