建议使用最新的方法：https://10.1pxeye.com/img-lazyload-version2024-intersectionobserver/

原则就是无论刚打开网页还是上下滚动浏览时，只加载已经进入屏幕范围内或即将进入屏幕范围内的图片。

下面的是两个示例：

两个示例中所用的图片都是一样的图片，第一组是经过优化的。且有两个js被引用。第二组是没有延迟加载的，且没有任何js的引用。

第一组：

https://10.1pxeye.com/docs/lazyload-grid-pictures/

第二组：

https://10.1pxeye.com/docs/lazyload-grid-pictures-no-optimized/

测试速度:

通过PageSpeed Insights测速后的结果：

很显然，示例中的图片并不多。整个站点的体积为5M，如果页面图片数量多，体积大，那么没有采用延迟加载图片的情况下是很影响页面的加载性能的。

原理：

HTML结构：

<div class="figure" lazy="loading">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/1.jpg">
</div>

默认将一张base64的1px的透明图片赋给图片src。不至于让浏览器报错。将实际的图片路径赋给data-src备用。

JavaScript代码：

(function ($) {
    //该函数用于判断作用对象是否进入预定区域
    $.fn.isInTheViewport = function () {
        var deviation = 500; // 正值为向屏幕外扩展区域，负值为向屏幕内压缩区域。
        if (deviation < 0 && (-deviation > (document.documentElement.clientHeight / 2))) {
            deviation = document.documentElement.clientHeight / 2;
        }
        var elementHeight = $(this)[0].offsetHeight;
        var bounding = $(this)[0].getBoundingClientRect();
        return bounding.top + deviation >= -elementHeight && bounding.bottom - deviation <= (window.innerHeight || document.documentElement.clientHeight) + elementHeight;
    }

    //该函针对每个图片的位置进行判断，且完全加载完毕后将其显示（淡入效果，通过代码中的fade-in类的样式实现）出来
    function lazyLoadAssets() {
        $('[lazy="loading"]').each(function () {
            var $this = $(this);
            if ($(this).isInTheViewport()) {
                var $img = $this.find("img");
                var $src = $img.data("src");
                $img.attr("src", $src);
                $img.on('load', function () {
                    $this.attr("lazy", "loaded");
                    $img.addClass("fade-in");
                });
            }
        });
    }

    $(function () {
        lazyLoadAssets();
    });

    $(window).on("scroll", function () {
        lazyLoadAssets();
    });

})(jQuery);

其他：

很多购物网站如：京东，淘宝，小米及其他新闻网站等图片较多的网站都采用着异步加载图片的方法。

如果不考虑网页的图片是否会被搜索引擎收录，那么完全可以采用本文的这种方法。因为蜘蛛爬页面时，抓到的图片都是1px的透明的图片。所以，蜘蛛会把它当做无意义图片，不会将其收录。

相关文章：

《如何让网站访问更快一些》- 背景图片延迟加载(jQuery)

WordPress文章内图片的延迟加载处理