使用背景
这是在编写一个网页专题时,从后端接口接收到图片时,以防图片加载出错,显示错误图片不美观而采取的措施。
使用前提
1.首先要在懒加载的img标签内添加绑定属性,如data-src,并且给一个默认图片src链接(用以当图片加载出错或未加载时显示)
2. 获取到所有需要懒加载的图片imgs
3. 调用以下方法
···
//懒加载图片
function loadImg(imgs) {
// 可视区域高度
var h = window.innerHeight;
//滚动区域高度
var s = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs.length; i++) {
if(imgs[i].offsetTop<h+s){
(function (i) {
setTimeout(function () {
// 不加立即执行函数i会等于9
// 隐形加载图片或其他资源
var temp = new Image();
temp.src = imgs[i].getAttribute('data-src');
// 图片加载完毕才赋值,否则一直使用默认图片
temp.onload = function () {
// 获取自定义属性data-src,用真图片替换默认图片
imgs[i].src = imgs[i].getAttribute('data-src')
}
}, 0)
})(i)
}
}
}
···
4.我这里每次只获取10条数据,所以并不太需要判断距离滚动加载,直接在获取到数据之后调用了这个方法。
5.如需滚动加载可以这样:
···
loadImg(imgs); //页面载入完毕加载可是区域内的图片
window.onscroll = loadImg(imgs);//滚动加载
···
That’s all!