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