Js实现图片懒加载

发表于 更新于 分类于

js实现动态加载图片, 节省流量, 并在加载时显示动画效果

思路及实现

给图片添加额外属性data-src, 并用空白小图片填充

1
<img data-src="./image.png" src="./blank.png">

找到页面内的所有图片

1
let imgs = $("img[data-src]");

根据滚动条高度以及窗口的高度判断图片是否在视野中, 若在, 将img.src= img.data-src

1
2
3
4
5
6
7
8
9
10
let bodyScrollHeight = document.body.scrollTop 
        || document.documentElement.scrollTop;
let windowHeight = window.innerHeight;
for (let i = 0; i < imgs.length; i++) {
    let imgHeight = $(imgs[i]).offset().top;
    if (imgHeight <= windowHeight + bodyScrollHeight 
        && imgHeight >= bodyScrollHeight) {
        imgs[i].src = imgs[i].getAttribute('data-src');
    }
}

源码

具体实现及添加动画效果见Github

https://github.com/GitHub-Laziji/JS-plugins