编辑

这里的一些答案适用于无限页面。Salman 要求的是延迟加载图像。

插入

演示

编辑：这些插件如何工作？

这是一个简化的解释：

1. 查找窗口大小并找到所有图像的位置及其大小
2. 如果图像不在窗口大小范围内，请将其替换为相同大小的占位符
3. 当用户向下滚动，并且图像位置 < 滚动 + 窗口高度时，图像被加载

我想出了我自己的基本方法，它似乎工作正常（到目前为止）。一些流行的脚本可能有很多我没有想到的东西。

注意- 此解决方案快速且易于实施，但当然对性能不利。当然考虑新的十字路口观察由提到Apoorv和解释developers.google如果性能是一个问题。

JQuery

$(window).scroll(function() {
    $.each($('img'), function() {
        if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
            var source = $(this).data('src');
            $(this).attr('src', source);
            $(this).removeAttr('data-src');
        }
    })
})

示例 html 代码

<div>
    <img src="" data-src="pathtoyour/image1.jpg">
    <img src="" data-src="pathtoyour/image2.jpg">
    <img src="" data-src="pathtoyour/image3.jpg">
</div>

解释

当页面滚动时，页面上的每个图像都会被检查..

$(this).attr('data-src') - 如果图像具有属性 data-src

以及这些图像离窗口底部有多远..

$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)

将 + 100 调整为您喜欢的任何值（例如 - 100）

var source = $(this).data('src');- 获取data-src=aka 图像 url的值

$(this).attr('src', source); - 将该值放入 src=

$(this).removeAttr('data-src'); - 删除 data-src 属性（这样你的浏览器就不会浪费资源来处理已经加载的图像）

添加到现有代码

要转换您的 html，只需在编辑器中搜索并替换src="为src="" data-src="

^{（编辑：用存档副本替换损坏的链接）}

AOL 的 Dave Artz 去年在 jQuery Conference Boston 上发表了关于优化的精彩演讲。AOL 使用名为 Sonar 的工具根据滚动位置进行按需加载。检查代码以了解它如何将 scrollTop（和其他）与元素偏移量进行比较的细节，以检测元素的部分或全部是否可见。

jQuery 声纳

Dave 在这些幻灯片中谈到了声纳。声纳从幻灯片 46 开始，而整体“按需加载”讨论从幻灯片 33 开始。

有一个相当不错的无限滚动的插件这里

我从来没有自己编程过，但我想这就是它的工作原理。

1. 一个事件绑定到窗口滚动

   $(window).scroll(myInfinteScrollFunction);
   

2. 被调用的函数检查滚动顶部是否大于窗口大小

   function myInfiniteScrollFunction() {  
       if($(window).scrollTop() == $(window).height())  
       makeAjaxRequest();  
   }
   

3. 发出 AJAX 请求，指定从哪个结果开始，获取多少，以及数据拉取所需的任何其他参数。

   $.ajax({
       type: "POST",
       url:  "myAjaxFile.php",
       data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
       success: myInfiniteLoadFunction(msg)
   });
   

4. ajax 返回一些（最有可能是 JSON 格式的）内容，并将它们传递给 loadnig 函数。

希望这是有道理的。

通过将侦听器附加到滚动事件或使用 setInterval 来延迟加载图像的性能非常低，因为每次调用 getBoundingClientRect() 都会强制浏览器重新布局整个页面，并且会给您的网站带来相当大的卡顿。

使用Lozad.js（只有 569 字节，没有依赖项），它使用IntersectionObserver高效地延迟加载图像。