在做h5移動頁面,相信大家一定碰到過頁面已經打開,但是裡面的圖片還未加載出來的情況,這種問題雖然不影響頁面的功能,但是不利於用戶體驗。拋開網速的原因,解決這個問題有多方面的思路:最基本的,要從http請求合並,緩存管理,圖片壓縮等方面做性能優化;另外就是可以對頁面裡用到的所有圖片做預加載的處理,當用戶打開頁面的時候不立即顯示第一屏,而是先顯示資源加載效果,等到加載完畢,再來顯示頁面的主內容,這樣就能解決那個問題。雖然這種加載效果占用了用戶的浏覽時間,但是我們可以把它做的好看有趣一點,所以也不會影響用戶體驗。本文實踐了這種想法,提供一個非常簡潔的圖片預加載組件,實現簡單,功能不弱,在做移動頁面的時候應該對你有參考價值。
效果(代碼下載):
html裡面的img標簽和css中background-imag等都會觸發浏覽器去加載相關的圖片,但是如果這個圖片已經加載過了的話,浏覽器就會直接使用這張已經加載好的圖片,從而能夠瞬間在頁面中渲染出來。通過javascript,創建Image對象,然後把這些對象的src屬性設置成要加載的圖片地址也能觸發浏覽器加載圖片,利用這一點就能實現圖片預加載的功能:在頁面裡首先把那些用到了相關的圖片的元素給藏掉,然後用js去加載圖片,等到所有圖片加載完畢再把藏掉的元素顯示即可。不過這僅僅是一個基本的實現思路,要完成一個功能較健壯的預加載組件,還有以下三個問題:
1)進度問題
由於預加載的同時,還得做一個預加載的效果,這就需要把加載的進度實時通知到外部上下文才行。關於進度有兩個實現方式,第一是已加載的數據大小/總的數據大小,第二是已加載的文件數/總的文件數,在浏覽器裡面,采用第一種方式是不現實的,根本沒有原生的辦法可以做到,所以只能采用第二種。
2)圖片加載失敗的問題
比如說有4張圖片,已經加載了50%,在加載第三張的時候出錯了,該不該將進度反饋成75%呢?答案是:應該。如果不這麼處理的話,進度永遠無法到100%,頁面主內容就沒機會顯示了,雖然圖片加載有失敗的情況,但是跟加載器沒有關系,也許圖片本身就不存在呢?也就是說圖片加載失敗不應該影響加載器的功能。
3)圖片加載超時的問題
圖片不能加載太久,否則用戶一直停留在加載效果上看不到主內容,用戶的等待時間不可控制地延長,導致用戶體驗下降,這樣就有悖加載器的初衷了。所以應該給每個圖片設置一個加載的超時時間,如果在所有圖片的超時時間之後,還沒加載完,就應該主動放棄加載,通知外部上下文加載完畢,顯示主內容。
綜合以上這些需求,本文提供的實現是:
(function () { function isArray(obj) { return Object.prototype.toString.call(obj) === '[object Array]'; } /** * @param imgList 要加載的圖片地址列表,['aa/asd.png','aa/xxx.png'] * @param callback 每成功加載一個圖片之後的回調,並傳入“已加載的圖片總數/要加載的圖片總數”表示進度 * @param timeout 每個圖片加載的超時時間,默認為5s */ var loader = function (imgList, callback, timeout) { timeout = timeout || 5000; imgList = isArray(imgList) && imgList || []; callback = typeof(callback) === 'function' && callback; var total = imgList.length, loaded = 0, imgages = [], _on = function () { loaded < total && (++loaded, callback && callback(loaded / total)); }; if (!total) { return callback && callback(1); } for (var i = 0; i < total; i++) { imgages[i] = new Image(); imgages[i].onload = imgages[i].onerror = _on; imgages[i].src = imgList[i]; } /** * 如果timeout * total時間范圍內,仍有圖片未加載出來(判斷條件是loaded < total),通知外部環境所有圖片均已加載 * 目的是避免用戶等待時間過長 */ setTimeout(function () { loaded < total && (loaded = total, callback && callback(loaded / total)); }, timeout * total); }; "function" === typeof define && define.cmd ? define(function () { return loader }) : window.imgLoader = loader; })();
使用方式(對應代碼中的test.html):
<script src="../js/imgLoader.js"></script> <script> imgLoader(['../img/page1.jpg', '../img/page2.jpg', '../img/page3.jpg'], function(percentage){ console.log(percentage) }); </script>
運行結果:
本文開篇給出的效果,對應的頁面是index.html,關於這個效果還有兩個問題需要說明:
1)它用了之前這篇博客利用輪播原理結合hammer.js實現簡潔的滑屏功能介紹的滑屏思路,並把它的一些邏輯包裝在了swipe.js,對外提供了一個全局變量Swipe,這個模塊有一個init的方法,以便外部通過調用Swipe.init()就能初始化滑屏相關的功能,原來沒有提供這個init方法,在js加載完畢就會初始化滑屏功能,有了這個init方法就可以把滑屏的邏輯延遲到加載完畢的時候去初始化。index.html一共引用了5個js:
<script src="js/zepto.js"></script> <script src="js/transition.js"></script> <script src="js/hammer.js"></script> <script src="js/imgLoader.js"></script> <script src="js/swipe.js"></script>
其中imgLoader.js就是前面介紹圖片加載器的實現,前三個js都是為最後一個swipe.js服務的,感興趣的可以繼續我的博客利用輪播原理結合hammer.js實現簡潔的滑屏功能了解相關內容。不過滑屏不是本文的重點,不了解swipe.js不會影響理解本文的內容~
2)雖然我在demo中用到了3張比較大的圖片,但是由於在本地環境,加載速度還是非常快,所以一開始的時候,很難看到預加載的效果,最後只能想辦法在每個進度回調之前做一下延遲,這才可以看到前面gif圖片一開始的那個loading效果,實現方式是:
//模擬加載慢的效果 var callbacks = []; imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) { var i = callbacks.length; callbacks.push(function(){ setTimeout(function(){ var percentT = percentage * 100; $('#loader__info').html('Loading ' + (parseInt(percentT)) + '%'); $('#loader__progress')[0].style.width = percentT + '%'; if (percentage == 1) { setTimeout(function(){ $('#loader').remove(); Swipe.init(); }, 600); } callbacks[i + 1] && callbacks[i + 1](); },600); }); if(percentage == 1) { callbacks[0](); } });
在真實環境,最好還是不要刻意去加這種延遲,沒必要為了讓用戶看到一個好看有趣的加載效果,就浪費它不必要的等待時間,所以真實環境還是應該用下面的代碼:
imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) { var percentT = percentage * 100; $('#loader__info').html('Loading ' + (parseInt(percentT)) + '%'); $('#loader__progress')[0].style.width = percentT + '%'; if (percentage == 1) { $('#loader').remove(); Swipe.init(); } });
預加載是一種比較常見的實現效果,但是在使用的時候,有些問題需要注意:
1)什麼時候用
頁面大的時候用,一般頁面大小超過3M就該考慮使用;頁面內包含數據量比較大的圖片,在手機端測試能夠明顯看到加載緩慢的時候,可以考慮使用。
2)盡量使用sprite圖片
3)加載效果實現的時候,盡量不用圖片,即使要用也應該用很小的圖片,否則加載效果卡在那就沒有意義了。
本文主要介紹了一個簡單的圖片預加載器,可應用於h5移動頁面的開發當中,在它的思路之下,如果有必要的話,還可以對它進行一些改造,用它來加載其它類型的資源,比如音頻或者視頻文件,畢竟這些類型的DOM對象也都有提供類似Image對象的屬性和回調。與預加載的方式相反的,還有一種圖片懶加載的技術,現在網上已經有比較好用的jquery插件了,不過還是很值的去深入了解下它的思路跟實現要點,等我有時間去研究研究再寫博客來介紹,敬請關注!
本文代下載