JS图片懒加载

图片懒加载:

为了提高页面性能,当图片出现在可视区域时再加载

  <style>
        img {
            display: block;
            width: 600px;
            height: 300px;
        }
    </style>

<img src="" data-src="img/m1.jpg" alt="">
    <img src="" data-src="img/m1.jpg" alt="">
    <img src="" data-src="img/m1.jpg" alt="">
    <img src="" data-src="img/m1.jpg" alt="">
    <img src="" data-src="img/m1.jpg" alt="">
    <img src="" data-src="img/m1.jpg" alt="">
    <img src="" data-src="img/m1.jpg" alt="">

 <script>
        //图片懒加载
        // 当元素的顶部距可视区域的距离小于或等于可视区域的高度时,
        //说明图片将要进入可视区域
        lazy();

        window.onscroll = function () {
            lazy();
        }


        function lazy() {
            var imgs = document.querySelectorAll('img')
            for (var i = 0; i < imgs.length; i++) {
                if (isInview(imgs[i])) {
                    imgs[i].src = imgs[i].dataset.src
                }
            }
        }



        function isInview(el) {
            return el.getBoundingClientRect().top <= window.innerHeight
        }
    </script>