圖片延時載入(lazyload)是網站常用的一種手段，目的是為了減少頁面載入時向伺服器的請求數，這裡分享一款支援大部分情況下（如IPAD瀏覽、非同步載入、某個範圍載入）的圖片延時載入外掛程式。
代碼及效果
先貼代碼：
$.extend({ imgLoad: function (options) { options = $.extend({ container: "img",//集合 time: 600,//滾動時定時重新整理時間 attribute: "src2" //儲存原圖地址的自訂屬性 }, options); var container = options.container, n = n || 0, tim, _time = 0; Load(); function GetHeight() { var d = document, y = (navigator.userAgent.toLowerCase().match(/iPad/i) == "ipad") ? window.pageYOffset : Math.max(d.documentElement.scrollTop, d.body.scrollTop); return d.documentElement.clientHeight + y - n; } function Load() { var hg = GetHeight(); $(container).each(function () { var _s2 = $(this).attr(options.attribute), t = $(this).offset().top; if (_s2 && t < hg && t > hg - 1000) { $(this).attr("src", _s2).removeAttr(options.attribute) }; }) }; if (!!window.ActiveXObject && !window.XMLHttpRequest) { _time = options.time } $(window).scroll(function () { clearTimeout(tim); tim = setTimeout(function () { Load(); }, options.time); }); } })
點擊這裡查看效果
參數說明
參數container：container表示要遍曆的容器，預設是IMG，也就是遍曆整個頁面的所有IMG。如果想只延時載入某個範圍內的圖片，可以修改此參數，如我想非同步載入面代碼中ul中的圖片，那麼只需要設定參數container的值為".imgContainer li img"即可。
<Script type="javascript/text"> $(function(){ $.imgLoad({ container: ".imgContainer li img"}); })</Script> <ul class="imgContainer"> <li> <img src2="X1.JPG" /> </li> <li> <img src2="X2.JPG" /> </li> <li> <img src2="X3.JPG" /> </li> </ul>
參數time：參數time表示延時載入的時間，預設是600毫秒，就是說當頁面滾動到該範圍時0.6秒後該圖片就會顯示，設定time為1秒：
<Script type="javascript/text">$(function(){ $.imgLoad({"time":1000 });})</Script>
參數attribute：此參數為儲存圖片路徑的參數，在圖片設定SRC屬性之前，要把真實的圖片路徑存在某個屬性裡，預設為SRC2，可以把此屬性設定為任意：
<Script type="javascript/text"> $(function(){ $.imgLoad({ attribute: "myAttr"}); })</Script><body> <img myAttr="1.jpg"/></body>
基本參數已經講完了，關於調用也是相當簡單的。這裡還有一個問題，由於延時載入的方法是寫在頁面滾動的事件裡，也就是代碼中的
$(window).scroll(function () { clearTimeout(tim); tim = setTimeout(function () { Load(); }, options.time); });
那麼如果直接重新整理頁面瀏覽器會直接跳到當前停留的位置，但是有的瀏覽器沒有觸發scroll事件，這種情況下的解決辦法在頁面載入完成後使用scrollTop方法，讓瀏覽器向上1個像素：
jQuery(window).scrollTop(1)
這樣這個外掛程式就講完了，相對於網上的一些外掛程式應該算是簡單實用的了，歡迎大家踴躍討論。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
