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

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

示例：

https://10.1pxeye.com/docs/lazyload-grid-background-images/

测试速度:

通过PageSpeed Insights测速后的结果：

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

原理：

HTML结构：

<div class="figure" lazy="loading-bg-img" data-src="images/1.jpg"></div>

将背景图片路径赋给data-src备用。必须要有的属性：lazy=”loading-bg-img”，figure这个class有没有随意。

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

    //该函针对每个容器的位置进行判断，且该容器的背景完全加载完毕后将其显示出来
    function lazyLoadBgImages() {
        $('[lazy="loading-bg-img"]').each(function () {
            var $this = $(this);
            if ($(this).isInTheViewport()) {
                var $src = $this.data("src");
                var $downloadingImage = $("<img>");
                $downloadingImage.attr("src", $src);
                $downloadingImage.on('load', function () {
                    $this.css({
                        'background-image': function () {
                            return 'url(' + $src + ')';
                        }
                    });
                    $this.attr('lazy', 'bg-img-loaded');
                });
            }
        });
    }

    $(function () {
        lazyLoadBgImages();
    });

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

})(jQuery);

其他：

本文介绍的方法灵感来自苹果的官方网站。

如果不考虑网页的图片是否会被搜索引擎收录，那么完全可以采用本文的这种方法。因为蜘蛛爬页面时，看不到背景图片。

相关文章：

https://10.1pxeye.com/image-loading-optimize-jquery/