关于html:理解offsetHeightscrollHeightclientHeight与js懒加载

76次阅读

共计 1634 个字符，预计需要花费 5 分钟才能阅读完成。

### 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 都是一样的，会随着滚动条高度变动 **）

<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…

正文完