如何利用圖片預加載組件提升html5移動頁面的用戶體驗

今天就跟大家聊聊有關如何利用圖片預加載組件提升html5移動頁面的用戶體驗 ，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

在做h6移動頁面，相信大家一定碰到過頁面已經打開，但是里面的圖片還未加載出來的情況，這種問題雖然不影響頁面的功能，但是不利于用戶體驗。拋開網速的原因，解決這個問題有多方面的思路：最基本的，要從http請求合并，緩存管理，圖片壓縮等方面做性能優化；另外就是可以對頁面里用到的所有圖片做預加載的處理，當用戶打開頁面的時候不立即顯示第一屏，而是先顯示資源加載效果，等到加載完畢，再來顯示頁面的主內容，這樣就能解決那個問題。雖然這種加載效果占用了用戶的瀏覽時間，但是我們可以把它做的好看有趣一點，所以也不會影響用戶體驗。
效果：

1. 實現思路

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

JavaScript Code復制內容到剪貼板

1. (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）：

XML/HTML Code復制內容到剪貼板

1. <script src="../js/imgLoader.js"></script>    
   <script>    
   imgLoader(['../img/page1.jpg', '../img/page2.jpg', '../img/page3.jpg'], function(percentage){    
   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. <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效果，實現方式是：

XML/HTML Code復制內容到剪貼板

1. //模擬加載慢的效果    
   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]();    
   }    
   });

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

XML/HTML Code復制內容到剪貼板

1. 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();    
   }    
   });

3. 注意事項
預加載是一種比較常見的實現效果，但是在使用的時候，有些問題需要注意：
1）什么時候用
頁面大的時候用，一般頁面大小超過3M就該考慮使用；頁面內包含數據量比較大的圖片，在手機端測試能夠明顯看到加載緩慢的時候，可以考慮使用。
2）盡量使用sprite圖片
3）加載效果實現的時候，盡量不用圖片，即使要用也應該用很小的圖片，否則加載效果卡在那就沒有意義了。
4. 總結
主要介紹了一個簡單的圖片預加載器，可應用于h6移動頁面的開發當中，在它的思路之下，如果有必要的話，還可以對它進行一些改造，用它來加載其它類型的資源，比如音頻或者視頻文件，畢竟這些類型的DOM對象也都有提供類似Image對象的屬性和回

看完上述內容，你們對如何利用圖片預加載組件提升html5移動頁面的用戶體驗 有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。