原生js实现图片懒加载

最新推荐文章于 2021-07-20 22:50:39 发布

zhener09

最新推荐文章于 2021-07-20 22:50:39 发布

阅读量127

点赞数

本文链接：https://blog.csdn.net/sinat_41747081/article/details/100176923

版权

所谓懒加载，即图片进入可视区域后再请求图片资源，如果图片没有进入可视区域，那么就不请求图片资源。
html:

<!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>懒加载实现</title>
    <style>
        .pic-list img {
            display: block;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="pic-list">
        <img src="" class="pic-item" lazyload="true" data-original="../../images/nav1.jpg" />
        <img src="" class="pic-item" lazyload="true" data-original="../../images/nav2.jpg" />
        <img src="" class="pic-item" lazyload="true" data-original="../../images/nav3.jpg" />
        <img src="" class="pic-item" lazyload="true" data-original="../../images/nav4.jpg" />
        <img src="" class="pic-item" lazyload="true" data-original="../../images/nav5.jpg" />
        <img src="" class="pic-item" lazyload="true" data-original="../../images/nav6.jpg" />
        <img src="" class="pic-item" lazyload="true" data-original="../../images/nav7.jpg" />
    </div>
    <script src="./lazyload.js"></script>
</body>
</html>

lazyload.js:

var viewHeight = document.documentElement.clientHeight; //可视区域的高度
function lazyload() {
    var pics = document.querySelectorAll('.pic-list img');
    Array.prototype.forEach.call(pics, function (pic) {
        if (pic.dataset.original === '') {
            return;
        }
        var position = pic.getBoundingClientRect();  // 元素的大小及其相对于视口的位置
        if (position.bottom >= 0 && position.top < viewHeight) {
            (function () {
                var originUrl = pic.dataset.original;
                if (originUrl) {
                    var img = new Image();
                    img.src = originUrl;
                    img.onload = function () {
                        pic.src = img.src;
                    };
                    pic.removeAttribute('data-original');
                    pic.removeAttribute('lazyload');
                }
            })();
        }
    });
}
lazyload();
document.addEventListener('scroll', lazyload)

效果为：
最开始可视区域有二张图片，请求的图片资源为：
在这里插入图片描述

当向下滚动时，第三张图片进入可视区域时，请求增加了第三张图片的资源

当滚动到底部时，请求资源变成了：