js实现动态加载图片, 节省流量, 并在加载时显示动画效果
思路及实现
给图片添加额外属性data-src
, 并用空白小图片填充
1 | <img data-src="./image.png" src="./blank.png"> |
找到页面内的所有图片
1 | let imgs = $("img[data-src]"); |
根据滚动条高度以及窗口的高度判断图片是否在视野中, 若在, 将img.src= img.data-src
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