likes
comments
collection
share

理解offsetHeight、scrollHeight、clientHeight与js懒加载

作者站长头像
站长
· 阅读数 32

clientXXX(clientWidth/clientHeight)

clientWidth/clientHeight 【内容宽高+内边距】(content+padding)

理解offsetHeight、scrollHeight、clientHeight与js懒加载

offsetXXX(offsetWidth/offsetHeight/offsetTop)

offsetWidth/offsetHeight【内容宽高+内边距+外边距+滚动条】(content+padding+border+margin)

理解offsetHeight、scrollHeight、clientHeight与js懒加载

scrollXXX(scrollWidth/scrollHeight/scrollTop)

scrollWidth/scrollHeight 【内容宽高】包含超出不可见的滚动部分

理解offsetHeight、scrollHeight、clientHeight与js懒加载

xxxTop

offsetTop 是当前元素顶部距离最近父元素顶部的距离,offsetTop大小固定,和有没有滚动条没有关系(如 有10张高度为100px,无margin,无border 的图片,第1张图片offsetTop为0,第二张图片offsetTop为100,第二张图片offsetTop为200...)

理解offsetHeight、scrollHeight、clientHeight与js懒加载

scrollTop 在有滚动条的情况下,为元素可视区域距离元素顶部的像素,也就是已经滚动了多少距离(**每张图片的scrollTop都是一样的,会随着滚动条高度变化**)

理解offsetHeight、scrollHeight、clientHeight与js懒加载

js懒加载

理解offsetHeight、scrollHeight、clientHeight与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...

转载自:https://segmentfault.com/a/1190000041690569
评论
请登录