搜尋
首頁web前端H5教程利用簡潔的圖片預先載入元件提升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. /**   
  7. * @param imgList 要載入的圖片位址列表,['aa/asd.png','aa/xxx.png'] 
  8.  
  9. * @param callback 每成功載入一張圖片之後的回調,並傳入「已載入的圖片總數/要載入的圖片總數」表示進度 
  10.  
  11. * @param timeout 每張圖片載入的逾時時間,預設為5s 
  12.   */
  13.     
  14. var loader = 函數
  15. (imgList、回調、逾時){  🎠🎜> 超時=超時|| 5000;    
  16. imgList = isArray(imgList) && imgList || [];    
  17. 回調= typeof(回呼)=== '函數' & >
  18. var total = imgList.length,    
  19. 已載入 = 0,    
  20. 圖片 = [],    
  21. _on = 函數 () {    
  22. 已加載 總計&&(已加載,回調&&回調(已加載/總計));    
  23. };    
  24. 如果 (!總計) {    
  25. 回傳回呼&&回呼(1);    
  26. }    
  27. for (var i =  
  28. images[i] = 
  29.  Image();    
  30. images[i].onload = images[i].onerror = _on;    
  31. images[i].src = imgList[i];    
  32. }    
  33. /**   
  34. * 如果timeout * total時間範圍內,仍有圖片未載入(判斷條件是loaded  
  35. * 目的是避免使用者等待時間過長   
  36. */    
  37. setTimeout(函數 () {    
  38. 已載入 總計&&(已載入=總計,回呼&&回呼(已載入/總計));    
  39. },超時*總計);    
  40. };    
  41. "function" === typeof definefunction () {    
  42. return loader    
  43. }) : window.imgLoader = loader;    
  44. })();   
使用方式(對應程式碼中的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. 腳本>             腳本 
  4. src
  5. >腳本>            
  6. 腳本
  7.  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;    
  5. callbacks.push(function(){    
  6. setTimeout(function(){    
  7. var 
  8. 百分比T = 百分比 * 100;    $('#loader__info').html('正在載入''(parseInt(percentT))'%');    
  9. $('#loader__progress')[0]
  10. .style.width
  11.  = percentT = percentT
  12. if (百分比 == 1) {    
  13. setTimeout(function(){    
  14. $('#loader').remove();    
  15. Swipe.init();    
  16. }, 600);    
  17. }    
  18. 回呼[i   1] && 回檔[i   1]();    
  19. },600);    
  20. });    
  21. if(百分比 == 1) {    
  22. 回呼[0]();    
  23. }    
  24. });   
在真實環境中,最好還是刻意還是不要加這種延遲,沒必要為了讓用戶看到一個有趣的加載效果,就浪費它不必要的等待時間,所以真實環境應該用下面的代碼:

XML/HTML 程式碼將內容複製到剪貼簿
  1. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], 函數(百分比){    
  2. var 百分比T = 百分比 * 100;   
  3. $('#loader__info').html('正在載入''(parseInt(percentT))'%');    
  4. $('#loader__progress')[0]
  5. .style.width = percentT = percentT
  6. if (百分比 == 1) {    
  7. $('#loader').remove();    
  8. Swipe.init();    
  9. }    
  10. });   

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

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
H5代碼示例:實際應用和教程H5代碼示例:實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能,極大地增強了前端開發的能力。 1.多媒體支持:通過和元素嵌入媒體,無需插件。 2.畫布(Canvas):使用元素動態渲染2D圖形和動畫。 3.本地存儲:通過localStorage和sessionStorage實現數據持久化存儲,提升用戶體驗。

H5和HTML5之間的連接:相似性和差異H5和HTML5之間的連接:相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念:HTML5是HTML的一個版本,包含新元素和API;H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼,H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎:密鑰元素及其目的H5代碼的基礎:密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等,用於構建現代網頁。 1.定義頭部內容,2.用於導航鏈接,3.表示獨立文章內容,4.組織頁面內容,5.展示側邊欄內容,6.定義頁腳,這些元素增強了網頁的結構和功能性。

HTML5和H5:了解常見用法HTML5和H5:了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別,H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本,增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用,適用於各種移動設備。

HTML5:現代網絡的基礎(H5)HTML5:現代網絡的基礎(H5)Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本,由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強,提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤,如、、、等,使網頁結構更清晰,SEO效果更好。 HTML5支持多媒體元素和,無需第三方插件,提升了用戶體驗和加載速度。 HTML5增強了表單功能,引入了新的輸入類型如、等,提高了用戶體驗和表單驗證效率。

H5代碼:編寫清潔有效的HTML5H5代碼:編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼?答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等,提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性,使用適當縮進和註釋。 3.優化性能,通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤,如標籤未閉合,確保代碼有效性。

H5:如何增強網絡上的用戶體驗H5:如何增強網絡上的用戶體驗Apr 19, 2025 am 12:08 AM

H5通過多媒體支持、離線存儲和性能優化提升網頁用戶體驗。 1)多媒體支持:H5的和元素簡化開發,提升用戶體驗。 2)離線存儲:WebStorage和IndexedDB允許離線使用,提升體驗。 3)性能優化:WebWorkers和元素優化性能,減少帶寬消耗。

解構H5代碼:標籤,元素和屬性解構H5代碼:標籤,元素和屬性Apr 18, 2025 am 12:06 AM

HTML5代碼由標籤、元素和屬性組成:1.標籤定義內容類型,用尖括號包圍,如。 2.元素由開始標籤、內容和結束標籤組成,如內容。 3.屬性在開始標籤中定義鍵值對,增強功能,如。這些是構建網頁結構的基本單位。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中