### 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...