js-实现页面懒加载

当页面需要请求大量图片时，会耗费大量的数据，使用懒加载，跨域提高用户的体验

js代码

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;
        }
    }
}

完整的代码如下

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>页面懒加载</title>
    <style>
        img {
            display: block;
            margin: 0 auto 50px;
            width: 960px;
            height: 540px;
        }
    </style>
</head>

<body>
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutb8xegj31hc0u0k77.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutz6y29j31hc0u0ak4.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuu8igyyj31hc0u0qgv.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuug47wrj31hc0u0k2q.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuowb0hj31hc0u0akx.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuyjapsj31hc0u0ths.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutb8xegj31hc0u0k77.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutz6y29j31hc0u0ak4.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuu8igyyj31hc0u0qgv.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuug47wrj31hc0u0k2q.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuowb0hj31hc0u0akx.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuyjapsj31hc0u0ths.jpg" alt=""> <img
        src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutb8xegj31hc0u0k77.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutz6y29j31hc0u0ak4.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuu8igyyj31hc0u0qgv.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuug47wrj31hc0u0k2q.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuowb0hj31hc0u0akx.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuyjapsj31hc0u0ths.jpg" alt="">
</body>
<script>
    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;
            }
        }
    }
</script>

</html>
posted @ 2020-07-07 15:40  飘逸_winxin  阅读(1600)  评论(0)  编辑  收藏  举报