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

 欢迎关注我的博客公众号
如果觉得我的文章对你有用,请随意赞赏
0%