懒加载

最新推荐文章于 2024-09-04 16:59:09 发布

毛默默不吃鱼

最新推荐文章于 2024-09-04 16:59:09 发布

阅读量96

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_40869401/article/details/109280029

版权

JS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<body>
    <div id="box">
        <img src="" trueSrc="img/6b0d1a7924eb2bc716cbd3ed80502a3b.jpg" />
    </div>
    <script>
        var box = document.getElementById("box"),
            aImg = box.getElementsByTagName("img")[0];


        //在用户滚动条滚动的时候，图片全部展示到用户视野再进行加载

        //首屏幕的高度 + 滚动条卷去的高度  >  图片底部到body的距离

        var winH = document.documentElement.clientHeight || document.body.clientHeight;
        //滚动事件    
        window.onscroll = function () {
            var scrollT = document.documentElement.scrollTop || document.body.scrollTop;


            //图片默认是隐藏的是获取不到距离body的距离的  也获取不到自身的高度
            if ((winH + scrollT) >= (aImg.parentNode.offsetTop + aImg.parentNode.offsetHeight)) {
                lazyImg();
            }
        }



        // 实现懒加载核心代码
        function lazyImg() {
            var oImg = new Image();
            // 给临时图片赋值真实图片地址
            oImg.src = aImg.getAttribute("trueSrc");
            oImg.onload = function () { //图片资源能够加载成功才能走里边
                //给真实图片进行赋值
                aImg.src = this.src;
                aImg.style.display = "block";
                oImg = null;
            }
        }
    </script>
</body>