這是全部IMG都會進行懶加載的，
<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>
