如何在用户将图像滚动到视图中时动态（或延迟）加载图像

Question

我在许多“现代”网站（例如 facebook 和谷歌图像搜索）中注意到了这一点，只有当用户向下滚动页面足以将它们带入可见视口区域时，折叠下方的图像才会加载（ 在查看源代码时，页面显示 X 个 <img> 标签，但它们不会立即从服务器获取）。这种技术叫什么，它是如何工作的，它在多少浏览器中工作。是否有一个 jQuery 插件可以用最少的代码实现这种行为。

编辑

奖励：有人可以解释 HTML 元素是否存在“onScrolledIntoView”或类似事件。如果没有，这些插件如何工作？

原文由 Salman A 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

插入

演示

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

这是一个简化的解释：

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

原文由 Alec Smart 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

注意- 此解决方案实施起来既快速又容易，但对性能来说当然不是很好。如果性能是一个问题， 请务必查看 Apoorv 提到的新的 Intersection Observer 并由 developers.google 解释。

查询

$(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= 又名图像 url

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

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

添加到现有代码

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

原文由 Hastig Zusammenstellen 发布，翻译遵循 CC BY-SA 4.0 许可协议