利用簡潔的圖片預先載入元件提升html5行動頁面的使用者體驗 _html5教學技巧

在做h5移動頁面，相信大家一定碰到過頁面已經打開，但是裡面的圖片還未加載出來的情況，這種問題雖然不影響頁面的功能，但是不利於用戶體驗。拋開網速的原因，解決這個問題有多方面的思路：最基本的，要從http請求合併，緩存管理，圖片壓縮等方面做性能優化；另外就是可以對頁面裡用到的所有圖片做預載入的處理，當使用者開啟頁面的時候不立即顯示第一屏，而是先顯示資源載入效果，等到載入完畢，再來顯示頁面的主內容，這樣就能解決那個問題。雖然這種載入效果佔據了使用者的瀏覽時間，但是我們可以把它做的好看有趣一點，所以也不會影響使用者體驗。本文實踐了這種想法，提供一個非常簡潔的圖片預加載組件，實現簡單，功能不弱，在做移動頁面的時候應該對你有參考價值。
效果：

1. 實現思路

html裡面的img標籤和css中background-imag等都會觸發瀏覽器去加載相關的圖片，但是如果這個圖片已經加載過了的話，瀏覽器就會直接使用這張已經加載好的圖片，從而能夠瞬間在頁面中渲染出來。透過javascript，創建Image對象，然後把這些對象的src屬性設置成要加載的圖片地址也能觸發瀏覽器加載圖片，利用這一點就能實現圖片預加載的功能：在頁面里首先把那些用到了相關的圖片的元素給藏掉，然後用js去載入圖片，等到所有圖片載入完畢再把藏掉的元素顯示即可。不過這只是一個基本的實現思路，要完成一個功能較健壯的預加載組件，還有以下三個問題：
1）進度問題
由於預加載的同時，還得做一個預加載的效果，這就需要把載入的進度即時通知到外部上下文才行。關於進度有兩個實作方式，第一是已載入的資料大小/總的資料大小，第二是已載入的檔案數/總的檔案數，在瀏覽器裡面，採用第一種方式是不切實際的，根本沒有原生的辦法可以做到，所以只能採用第二種。
2）圖片載入失敗的問題
比如說有4張圖片，已經載入了50%，在載入第三張的時候出錯了，該不該將進度回饋成75%呢？答案是：應該。如果不這麼處理的話，進度永遠無法到100%，頁面主內容就沒機會顯示了，雖然圖片加載有失敗的情況，但是跟加載器沒有關係，也許圖片本身就不存在呢？也就是說圖片載入失敗不應該影響載入器的功能。
3）圖片載入超時的問題
圖片不能載入太久，否則使用者一直停留在載入效果上看不到主內容，使用者的等待時間不可控制地延長，導致使用者體驗下降，這樣就有悖加載器的初衷了。所以應該給每個圖片設定一個加載的超時時間，如果在所有圖片的超時時間之後，還沒加載完，就應該主動放棄加載，通知外部上下文加載完畢，顯示主內容。
綜合以上這些需求，本文提供的實現是：

JavaScript Code複製內容到剪貼簿

1. (函數 () {    
2. 函數 isArray(obj) {    
3. 回傳 Object.prototype.toString.call(obj) === '[物件陣列]''[物件陣列]'
4. ;    
5. }    
6. /**   
* @param imgList 要載入的圖片位址列表，['aa/asd.png','aa/xxx.png'] 
7.  
* @param callback 每成功載入一張圖片之後的回調，並傳入「已載入的圖片總數/要載入的圖片總數」表示進度 
8.  
* @param timeout 每張圖片載入的逾時時間，預設為5s 
9.   */
    
10. var loader = 函數
11. （imgList、回調、逾時）{  🎠🎜> 超時=超時|| 5000；    
12. imgList = isArray(imgList) && imgList || []；    
13. 回調= typeof（回呼）=== '函數' & >
14. var total = imgList.length,    
15. 已載入 = 0,    
16. 圖片 = [],    
17. _on = 函數 () {    
18. 已加載 總計&&（已加載，回調&&回調（已加載/總計））；    
19. }；    
20. 如果 （！總計） {    
21. 回傳回呼&&回呼(1);    
22. }    
23. for (var i =  
images[i] = 
24. 新 Image();    
images[i].onload = images[i].onerror = _on;    
images[i].src = imgList[i];    
}    
28. /**   
29. * 如果timeout * total時間範圍內，仍有圖片未載入（判斷條件是loaded  
30. * 目的是避免使用者等待時間過長   
31. */    
32. setTimeout(函數 () {    
33. 已載入 總計&&（已載入=總計，回呼&&回呼（已載入/總計））；    
34. }，超時*總計）；    
35. };    
36. "function" === typeof definefunction () {    
37. return loader    
}) : window.imgLoader = loader;    
})();   

使用方式（對應程式碼中的test.html）：

XML/HTML Code

複製內容到剪貼簿

1. script src=src=src=" .js">script
2. >        
3. script
4. >    
5. imgLoader(['../img/page1.jpg', '../img/page2.jpg', '../img/page3.jpg'], function(percentage){   
6. console.log(percentage)     });    

script

>

   

運行結果：

2. demo說明本文開頭給出的效果，對應的頁是index.html，關於這個效果還有兩個問題需要說明：1）它用了之前這篇博客

Hammer.js 輪播原理實現簡潔的滑屏功能介紹的滑屏思路，並把它的一些邏輯包裝在了swipe.js，對外提供了一個全域變數Swipe，這個模組有一個init的方法，以便外部透過呼叫Swipe.init()就能初始化滑屏相關的功能，原來沒有提供這個init方法，在js載入完畢就會初始化滑屏功能，有了這個init方法就可以把滑屏的邏輯延遲到載入完畢的時候去初始化。 index.html一共引用了5個js： XML/HTML Code複製內容到剪貼簿

1. 腳本 src=jssrc="js/zepto. >腳本>    
2.          腳本 src="js/ transition .js">
3. 腳本>             腳本 
src
4. >腳本>            
腳本
5.  src>腳本>            

腳本

 

src>

腳本>    其中imgLoader.js就是前面介紹圖片載入器的實現，前面三個js都是為最後一個swipe.js服務的，感興趣的可以繼續我的博客利用輪播原理結合hammer.js實現簡潔的滑屏功能了解相關內容。不過滑屏不是文章的重點，不了解swipe.js不會影響理解文章的內容~2）雖然我在demo中用到了3張比較大的圖片，但是由於在本地環境，加載速度還是非常快，所以一開始的時候，很難預先載入的效果，最後只能想辦法在每個進度回呼之前做一下延遲，這才可以看到前面gif圖片一開始的那個載入效果，實作方式是： XML/HTML 程式碼將內容複製到剪貼簿

1. //模擬負荷慢的效果    
2. var 回呼 = [];    
3. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], 函數（百分比）{    
4. var i = 回呼.length;    
callbacks.push(function(){    
setTimeout(function(){    
var 
7. 百分比T = 百分比 * 100;    $('#loader__info').html('正在載入''(parseInt(percentT))'%');    
8. $('#loader__progress')[0]
.style.width
9.  = percentT = percentT
10. if (百分比 == 1) {    
11. setTimeout(function(){    
12. $('#loader').remove();    
13. Swipe.init();    
14. }, 600);    
15. }    
16. 回呼[i   1] && 回檔[i   1]();    
17. },600);    
18. });    
19. if(百分比 == 1) {    
20. 回呼[0]();    
21. }    
22. });   

在真實環境中，最好還是刻意還是不要加這種延遲，沒必要為了讓用戶看到一個有趣的加載效果，就浪費它不必要的等待時間，所以真實環境應該用下面的代碼：

XML/HTML 程式碼將內容複製到剪貼簿

1. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], 函數（百分比）{    
2. var 百分比T = 百分比 * 100;   
$('#loader__info').html('正在載入''(parseInt(percentT))'%');    
$('#loader__progress')[0]
4. .style.width = percentT = percentT
5. if (百分比 == 1) {    
6. $('#loader').remove();    
7. Swipe.init();    
8. }    
9. });   

3. 注意事項
預先載入是一種比較常見的實現效果，但是在使用的時候，有些問題需要注意：
1）什麼時候用
頁面大的時候用，一般頁面大小超過3M就該考慮使用；頁內包含數據量比較大的圖片，在手機端測試能夠明顯看到加載緩慢的時候，可以考慮使用。
2）盡量使用sprite圖片
3）加載效果實現的時候，盡量不用圖片，即使要用也應該用很小的圖片，否則加載效果卡在那就沒有意義了。
4. 總結
本文主要介紹了一個簡單的圖片預加載器，可應用於h5移動頁面的開發當中，在它的思路之下，如果有必要的話，還可以對它進行一些改造，用它來加載其它類型的資源，比如音頻或者視頻文件，畢竟這些類型的DOM對像也都有提供類似Image對象的屬性和回調。與預先載入的方式相反的，還有一種圖片懶加載的技術，現在網上已經有比較好用的jquery插件了，不過還是很值的去深入了解下它的思路跟實現要點，等我有時間去研究研究。同時感謝大家一直以來對腳本之家網站的支持！