js图片加载优化之----懒加载_js 轮播图加载慢

作者：羊村懒王 | 2024-02-20 20:51:59

踩

js 轮播图加载慢

<!DOCTYPE html>

<html>

<head>

img{

width: 1000px;

height: 600px;

margin-left: 10px;

border: 1px solid #000;

}

</style>

function getPos(obj){

var l = 0;

var t = 0;

while(obj){

l += obj.offsetLeft;

t += obj.offsetTop;

obj = obj.offsetParent;

}

return {left:l ,top : t}

}

window.onload = window.onscroll = function(){

//获取到img

var aImg = document.getElementsByTagName("img");

//获取到它的scrollTop 值考虑兼容问题

var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

// clientHeight = 上下padding + height

var clientH = document.documentElement.clientHeight;

//循环遍历每一项通过调用获取到每一个i 项对象的top 值

for (var i = 0;i<aImg.length;i++) {

var aImgTop = getPos(aImg[i]).top;

// 当滚动的时候进行判断,看他的滚动的高度加上它的clientHeight 是否比它的 top 值大

// 如果大或等于说明滚动到当前位置可以加载图片

if (oScrollTop + clientH >= aImgTop) {

// 进行图片的加载

aImg[i].src = aImg[i].getAttribute("_src");

}

</script>

</head>

<body>

</body>

</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/120856