微客导航 » 文章资讯 » js实现图片懒加载效果

js实现图片懒加载效果

2024-01-28 10:40:03 159

本文实例为大家分享了js图片懒加载的具体代码，供大家参考，具体内容如下

图片懒加载，思路:当鼠标滑动到对应图片的高度时，进行图片的加载；







#div{
width:575px;
height:auto;
overflow:hidden;
border:red1pxsolid;
margin:0auto;
/*给该div设置定位*/
position:relative;
}
#divimg{
width:267px;
height:396px;
margin-left:10px;
border:1pxsolid#000;
}


functiongetPos(obj){
varl=0;
vart=0;
while(obj){

l+=obj.offsetLeft;
t+=obj.offsetTop;
obj=obj.offsetParent;
}
return{left:l,top:t}
}
window.onload=window.onscroll=function(){
//获取到img
varaImg=document.getElementsByTagName("img");
//获取到它的scrollTop值考虑兼容问题
varoScrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//clientHeight=上下padding+height
varclientH=document.documentElement.clientHeight;
//循环遍历每一项通过调用获取到每一个i项对象的top值
for(vari=0;i=aImgTop){
//进行图片的加载
aImg[i].src=aImg[i].getAttribute("_src");
}
}
}

当有类似于瀑布流的布局时常用的加载模式

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

js实现图片懒加载效果

热门推荐

随机推荐