理解offsetHeight、scrollHeight、clientHeight与js懒加载
站长
· 阅读数 30
clientXXX(clientWidth/clientHeight)
clientWidth/clientHeight 【内容宽高+内边距】(content+padding)
offsetXXX(offsetWidth/offsetHeight/offsetTop)
offsetWidth/offsetHeight【内容宽高+内边距+外边距+滚动条】(content+padding+border+margin)
scrollXXX(scrollWidth/scrollHeight/scrollTop)
scrollWidth/scrollHeight 【内容宽高】包含超出不可见的滚动部分
xxxTop
offsetTop 是当前元素顶部距离最近父元素顶部的距离,offsetTop大小固定，和有没有滚动条没有关系（如 有10张高度为100px，无margin，无border 的图片，第1张图片offsetTop为0，第二张图片offsetTop为100，第二张图片offsetTop为200...）
scrollTop 在有滚动条的情况下，为元素可视区域距离元素顶部的像素，也就是已经滚动了多少距离（**每张图片的scrollTop都是一样的，会随着滚动条高度变化**）
js懒加载
<body>
<img src="./1.png" data-src="./1.png" class="img-content"/>
<img src="./2.png" data-src="2.png" class="img-content"/>
<img src="./3.png" data-src="3.png" class="img-content"/>
<img src="./4.png" data-src="4.png" class="img-content"/>
<img src="./5.png" data-src="5.png" class="img-content"/>
<img src="./6.png" data-src="6.png" class="img-content"/>
<img src="./7.png" data-src="7.png" class="img-content"/>
<img src="./8.png" data-src="8.png" class="img-content"/>
<img src="./9.png" data-src="9.png" class="img-content"/>
<img src="./10.png" data-src="10.png"class="img-content"/>
</body>
<script>
let imgs = document.getElementsByClassName("img-content"); //获取要懒加载的元素
let clientHeight = document.documentElement.clientHeight//屏幕高度（固定不变）
function lazyLoad(imgs){
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop//随滚动条高度变化
for(let i=0;i<imgs.length;i++){
//imgs[i].offsetTop 每张图片的offsetTop固定不变
if(scrollTop + clientHeight >imgs[i].offsetTop ){
imgs[i].src = imgs[i].getAttribute('data-src')
}
}
}
window.onscroll = function(){ //屏幕滚动的时候触发
lazyLoad(imgs)
}
</script>参考文章
https://www.cnblogs.com/enhah...https://juejin.cn/post/684490...