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

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

1. 實現思路

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

>

運行結果：