JavaScript 实现图片懒加载 (Lazyload)

本文代码来自 知乎 / Daotin : 3分钟搞定图片懒加载

之前找到许多懒加载的源码都需要手动定义图片大小，这对于一部分页面来讲很困难。以下的代码则可以绕过这一步骤，从而更加容易添加到网站上。

首先需要将图片调整为 data-src 属性进行加载，并根据自己需要添加 class

<img data-src="./images/1.jpg">

在网页末尾，引用 jQuery 和相关代码

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
    $(function () {
        // 第一次需要先加载一次
        lazyLoad();

        $(window).scroll(lazyLoad);

        function isInSight(el) {
            const bound = el.getBoundingClientRect();
            const clientHeight = $(window).height(); // 可视区高度
            return bound.top <= clientHeight + 100; // 这里有个+100是为了提前加载。（推荐数值大于一个屏幕高度 px ，只 +100px 在实践中略显滞后。——摘者按）
        }
        function lazyLoad() {
            $.each($('img'), (index,item)=>{ //选择器这里可以加入自己设置的 class（摘者按）
                if(isInSight(item)) {
                    $(item).attr('src', $(item).attr('data-src'));
                }
            });
        }
    });
</script>