懒加载图片（首页和其他页）实现

首页懒加载实现代码

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 1226px;
            height: 460px;
            margin: 50px auto;
            background: url(./img/TB1BlobNFXXXXXyXXXXXXXXXXXX-34-34.gif) no-repeat center #efefef;
        }

        div img {
            width: 100%;
            height: 100%;

            /* 默认图片是隐藏的 */
            display: none;
        }
    </style>
</head>

<body>
    <div><img src="" trueSrc="./img/banner.jpg" alt="图片"></div>
    <script>
        /* 
        懒加载
        优点：
        1.防止破图，影响用户体验
        2.有利于性能优化
      */


        /* 
          首屏懒加载实现
          1.真实的图片地址不是直接赋值给图片src,而是定义图片的自定义属性上
        */


        // 多长时间后保证图片真够加载成功才去展示图片

        // 获取元素
        var aImg = document.getElementsByTagName("img")[0];

        //设置延迟定时器
        setTimeout(function () {
            lazyImg(aImg);
        }, 100);

        /*
            懒加载
            参数：
                curImg  要处理的图片
        */
        function lazyImg(curImg) {
            // 先创建一张临时图片
            var oImg = document.createElement("img");
            // 将真实图片地址赋值给临时图片的src
            oImg.src = curImg.getAttribute("trueSrc");
            // 绑定onload事件  加载成功才会去执行函数 不成功函数不执行
            oImg.onload = function () { //临时图片资源是否加载成功
                // 能够进来证明图片资源加载成功了
                // 将加载成功的图片地址赋值真实图片  将临时图片src的值赋值当前图片src
                curImg.src = this.src;
                // 将真实图片展示
                curImg.style.display = "block";

            }
        }
    </script>

其他页懒加载实现代码

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 1226px;
            height: 460px;
            margin: 1500px auto;
            background: url(./img/TB1BlobNFXXXXXyXXXXXXXXXXXX-34-34.gif) no-repeat center #efefef;
        }

        div img {
            width: 100%;
            height: 100%;

            /* 默认图片是隐藏的 */
            display: none;
        }
    </style>
</head>

<body>
    <div><img src="" trueSrc="./img/banner.jpg" alt="图片"></div>
    <script>
    /* 
        懒加载
        优点：
        1.防止破图，影响用户体验
        2.有利于性能优化
      */


        /* 
          其它懒加载的实现
          1.真实的图片地址不是直接赋值给图片src,而是定义图片的自定义属性上
          2.当前图片用户看到了才去加载
        */

        // 获取元素
        var aImg = document.getElementsByTagName("img")[0];

        // 元素隐藏了不占用页面空间 display:none;  没办法获取到js盒子模型的值，值都是0，一般获取父级
        console.log(aImg.parentNode.offsetTop);
      

        // 首屏的高度
        var winH = document.documentElement.clientHeight;
       
        // 绑定滚动事件
        window.onscroll =function(){
            // 获取滚动条滚动的距离
            var scrollT = document.documentElement.scrollTop || document.body.scrollTop;

            // 判断：首屏高度 + 滚动距离  >= 图片中部到body的距离
            if((winH + scrollT) >= (aImg.parentNode.offsetTop + aImg.parentNode.clientHeight /2)){
                // 懒加载
                lazyImg(aImg);
            }
        }


        /*
            懒加载
            参数：
                curImg:处理的图片
        */ 

        function lazyImg(curImg){
            // 先创建临时图片
            var oImg = document.createElement("img");
            // 将当前图片结构上真实图片地址赋值给临时图片src
            oImg.src = curImg.getAttribute("trueSrc");
            // 判断临时图片资源是否加载成功
            oImg.onload = function(){
                // 加载成功图片资源赋值给当前图片
                curImg.src = this.src;
                // 展示图片
                curImg.style.display = "block";
            }
        }
    </script>

懒加载图片（首页和其他页）实现

首页懒加载实现代码

其他页懒加载实现代码

猜你喜欢