利用簡潔的圖片預加載組件提升html5移動頁面的用

2020-03-24 19:09:43

字體：大中小

來源：轉載

供稿：網友

在做h5移動頁面，相信大家一定碰到過頁面已經打開，但是里面的圖片還未加載出來的情況，這種問題雖然不影響頁面的功能，但是不利于用戶體驗。拋開網速的原因，解決這個問題有多方面的思路：最基本的，要從http請求合并，緩存管理，圖片壓縮等方面做性能優化；另外就是可以對頁面里用到的所有圖片做預加載的處理，當用戶打開頁面的時候不立即顯示第一屏，而是先顯示資源加載效果，等到加載完畢，再來顯示頁面的主內容，這樣就能解決那個問題。雖然這種加載效果占用了用戶的瀏覽時間，但是我們可以把它做的好看有趣一點，所以也不會影響用戶體驗。本文實踐了這種想法，提供一個非常簡潔的圖片預加載組件，實現簡單，功能不弱，在做移動頁面的時候應該對你有參考價值。
效果：
Hammer.js+輪播原理實現簡潔的滑屏功能介紹的滑屏思路，并把它的一些邏輯包裝在了swipe.js，對外提供了一個html' target='_blank'>全局變量Swipe，這個模塊有一個init的方法，以便外部通過調用Swipe.init()就能初始化滑屏相關的功能，原來沒有提供這個init方法，在js加載完畢就會初始化滑屏功能，有了這個init方法就可以把滑屏的邏輯延遲到加載完畢的時候去初始化。index.html一共引用了5個js： XML/HTML Code復制內容到剪貼板
scriptsrc= js/zepto.js /script scriptsrc= js/transition.js /script scriptsrc= js/hammer.js /script scriptsrc= js/imgLoader.js /script scriptsrc= js/swipe.js /script
其中imgLoader.js就是前面介紹圖片加載器的實現，前三個js都是為最后一個swipe.js服務的，感興趣的可以繼續我的博客利用輪播原理結合hammer.js實現簡潔的滑屏功能了解相關內容。不過滑屏不是本文的重點，不了解swipe.js不會影響理解本文的內容~
2）雖然我在demo中用到了3張比較大的圖片，但是由于在本地環境，加載速度還是非常快，所以一開始的時候，很難看到預加載的效果，最后只能想辦法在每個進度回調之前做一下延遲，這才可以看到前面gif圖片一開始的那個loading效果，實現方式是： XML/HTML Code復制內容到剪貼板
varcallbacks=[]; imgLoader(['img/page1.jpg','img/page2.jpg','img/page3.jpg'],function(percentage){ vari=callbacks.length; callbacks.push(function(){ setTimeout(function(){ varpercentT=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復制內容到剪貼板
imgLoader(['img/page1.jpg','img/page2.jpg','img/page3.jpg'],function(percentage){ varpercentT=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. 總結
本文主要介紹了一個簡單的圖片預加載器，可應用于h5移動頁面的開發當中，在它的思路之下，如果有必要的話，還可以對它進行一些改造，用它來加載其它類型的資源，比如音頻或者視頻文件，畢竟這些類型的DOM對象也都有提供類似Image對象的屬性和回調。與預加載的方式相反的，還有一種圖片懶加載的技術，現在網上已經有比較好用的jquery插件了，不過還是很值的去深入了解下它的思路跟實現要點，等我有時間去研究研究。同時感謝大家一直以來對phpstudy網站的支持！html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML里的最后一行文字顯示不全怎么處理

下一篇：HTML代碼書寫規范指南