前端图片懒加载

图片懒加载（必须指定div的高度，否则有offsetTop有误差）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>
    * {
        padding: 0;
        margin: 0;
    }
    div {
        height: 300px;
        width: 300px;
    }
</style>

<body>
    <div>
        <img src="../img/default.jpg" width="100%" height="100%" alt="" data="../img/1.jpg">
    </div>
    <div>
        <img src="../img/default.jpg" width="100%" height="100%"  alt="" data="../img/2.jpg">
    </div>
    <div>
        <img src="../img/default.jpg" width="100%" height="100%"  alt="" data="../img/3.jpg">
    </div>
    <div>
        <img src="../img/default.jpg" width="100%" height="100%"  alt="" data="../img/4.jpg">
    </div>
    <div>
        <img src="../img/default.jpg" width="100%" height="100%"  alt="" data="../img/5.jpg">
    </div>
    <div>
        <img src="../img/default.jpg"  alt="" data="../img/6.jpg">
    </div>


    <script>

        


            let imgs = document.querySelectorAll('img');
        // 可视区高度
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

        function lazyLoad() {
            // 滚动卷去的高度
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            for (let i = 0; i < imgs.length; i++) {
                // 图片在可视区冒出的高度
                
                let x = clientHeight + scrollTop - imgs[i].offsetTop;
                // 图片在可视区内
                console.log(i, imgs[i].offsetTop);

                if (x > 0 && x < clientHeight + imgs[i].height) {
                    imgs[i].src = imgs[i].getAttribute('data');
                }

            }
        }


        lazyLoad();
        window.onscroll = function () {
            lazyLoad();
        }
    </script>
</body>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。