隨著網絡速度的提升和網站內容的越來越豐富,網頁加載速度是一個非常關鍵的問題。而延遲加載技術是一種優化網頁加載速度的常用方法。
jQuery img延遲加載插件就是一種常用的延遲加載技術。它能夠延遲圖片等資源的加載,只有在滾動到對應位置時才會真正加載該資源,從而減輕了網頁的加載壓力,提高了用戶體驗。
//代碼示例 //首先引入jquery庫和lazyload.js插件 <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="jquery.lazyload.js"></script> //圖片的HTML結構 <img class="lazy" data-original="真是圖片地址" src="默認圖片地址"> //接下來在js文件中調用lazyload()函數即可 $("img.lazy").lazyload({ effect : "fadeIn", //圖片淡入效果 threshold : 200, //提前200像素進行加載 failurelimit : 10 //加載失敗最大次數 });
需要注意的是,在使用jQuery img延遲加載插件的過程中,圖片應該將真實地址存儲在data-original屬性中,而將默認地址存儲在src屬性中。插件會先加載默認圖片,在真正需要加載的時候再切換為真實地址,避免了初次加載時圖片的空白。