js实现图片懒加载

最新推荐文章于 2024-05-17 14:04:51 发布

置顶 TeemoZ

最新推荐文章于 2024-05-17 14:04:51 发布

阅读量132

点赞数

文章标签： JS

本文链接：https://blog.csdn.net/TeemoZ/article/details/96271162

版权

var index = 1;

// 初始化部分图片
imgLoad();

// 滑动事件
window.onscroll = function load(){
imgLoad();
}

// 懒加载图片
function imgLoad(){
var img = document.getElementById('img'+index);
var offsetTop = document.body.scrollTop || document.documentElement.scrollTop;
while((img.offsetTop - offsetTop) < window.innerHeight && index < 10){ //这里index用于测试，加载图片张数为10张
index++;
// 创建新div
var div = document.createElement("div");
div.style.cssText = "background:url('./img" +index + ".png') no-repeat";
img.parentNode.insertBefore(div,img.nextSibling)
// 赋予id
div.id = "img"+index;
img = document.getElementById('img'+index);
}
}