基本思路
- 页面的每个 img 标签的 src 属性都设置为一张 loading 图片;
- 接着为 img 加一个 data-src 属性装图片的真正地址,再加一个 data-isloaded 属性来标记 src 是否以被 data-src 给替换过;
- 为 window 添加 scroll 监听事件,判断图片是否已被替换,如果还没被替换,则判断是否在视野内,如果可见,则把 src 的地址替换为 data-src 的地址,并把替换标记 isloaded 设为 true;
具体代码:
window.addEventListener('scroll', function() {
lazyLoadImages();
});
function lazyLoadImages() {
let imgs = document.querySelectorAll("img");
for(let img of imgs) {
if(!img.dataset.isloaded && isVisible(img)) {
img.src = img.dataset.src + "&nocache=" + Math.random();
img.dataset.isloaded = true;
}
}
}
function isVisible(elem) {
return elem.getBoundingClientRect().top < document.documentElement.clientHeight;
}
lazyLoadImages();