这是全部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>