這是全部IMG都會進(jìn)行懶加載的,
<img data-src="[list:ico]" alt="[list:title]" >
JS代碼
<!-- 頁面圖片延遲加載 --> <script> var imgs = document.querySelectorAll('img'); function getTop(e) { var T = e.offsetTop; while ((e = e.offsetParent)) { T += e.offsetTop; } return T; }; function lazyLoad(imgs) { var H = document.documentElement.clientHeight; var S = document.documentElement.scrollTop || document.body.scrollTop; for (var i = 0; i < imgs.length; i++) { if (H + S > getTop(imgs[i])) { if (imgs[i].getAttribute('data-src')) { imgs[i].src = imgs[i].getAttribute('data-src'); } } } }; window.onload = window.onscroll = function() { lazyLoad(imgs); }; </script>
如果需要指定的話,可以將JS修改:
<!-- 頁面圖片延遲加載 --> <script> window.onload = window.onscroll = function () { var imgs = document.querySelectorAll('.lazy_location img'); function getTop(e) { var T = e.offsetTop; while ((e = e.offsetParent)) { T += e.offsetTop; } return T; } function lazyLoad(imgs) { var H = document.documentElement.clientHeight; var S = document.documentElement.scrollTop || document.body.scrollTop; for (var i = 0; i < imgs.length; i++) { if (H + S > getTop(imgs[i])) { if (imgs[i].getAttribute('data-src')) { imgs[i].src = imgs[i].getAttribute('data-src'); console.log("圖片加載:", imgs[i].src); } } } } lazyLoad(imgs); // 頁面加載時檢查一次 }; </script>
然后對圖片添加CLASS類:
<a href="javascript:;" class="lazy_location"> <img data-src="[list:ico]" alt="[list:title]" > </a>