前端之js-懒加载

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36251118/article/details/88052883

实现思路:先将所有图片的路径存放在自定义属性中,到达位置(图片距离页面顶部的距离小于滚动过的距离+屏幕视口的高度),将自定义属性中的路径重新赋给图片的路径,展示到页面中

   var num = document.getElementsByTagName('img').length;
    var img = document.getElementsByTagName("img");
    // 存储图片加载到的位置,避免每次都从第一张图片开始遍历
    var n = 0;
    // 页面载入完毕加载可视区域内的图片
    lazyload();                                
    window.onscroll = lazyload;
    // 监听页面滚动事件
    function lazyload() {
        // 可见区域高度
        var seeHeight = document.documentElement.clientHeight;
        // 滚动条距离顶部高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = n; i < num; i++) {
            if (img[i].offsetTop < seeHeight + scrollTop) {
                if (img[i].getAttribute("src") == "default.jpg") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }

猜你喜欢

转载自blog.csdn.net/qq_36251118/article/details/88052883
今日推荐