使用Javascript延迟加载图片有什么好处吗？

Question

我在每个页面上都有一个幻灯片，其中包含页面所述对象的图像。 每个幻灯片通常包含5-6个图像幻灯片。

我的想法是仅在前2张图像上设置src属性，在其余的图像上只设置data-src属性到图像文件中，然后在整个页面加载完成后，借助以下JavaScript加载其余图片：

function loadImages() {
    $('#house-carousel .item img').each(function(){
        if($(this).attr('data-src')){
            $(this).attr('src', $(this).attr('data-src'));
        }
    });
}

$(document).ready(loadImages);

这种思路是因为在用户查看页面的前几秒钟，图像并不会显示出来，所以我可以延迟加载它们，让客户端先下载页面上其他内容。

但是现在我再次思考...这样真的有帮助吗？我的意思是，图像不会阻塞渲染，对吧？那么无论是在页面加载时加载它们还是在页面加载后加载它们是否真的有所区别呢？

请注意，这不是一个“延迟到用户查看图像”的脚本，它只是将其延迟到其他资源加载完毕之后。

那么你认为这样做真的有用吗？像http://tools.pingdom.com这样的速度测试工具并没有显示任何差异。

- Marcus Lind

---

这是一个很好的问题。加载1张图片必须比加载更多图片要快。所以一切都取决于您的懒加载方法。 - Petroff

是的，但它是否有助于其余DOM更快地加载？因为这才是关键。如果我连续加载5个图像，或者我先加载1个图像，然后加载其余DOM，最后再加载其他4个图像。是否存在任何性能提升或感知性能提升？ - Marcus Lind

是的，它会更快。我无法告诉您快多少。但如果您不等待图像加载，它可能会破坏您的滑块。请记住这一点。 - Petroff

@LShetty，将你的评论转换为答案，再添加几个例子，你就得到了一个成功的答案。我很乐意点赞。 - Alex

@Alex 已完成，谢谢 :) - lshettyl

Answer 1

那么，如果我在页面加载时加载它们，或者在页面加载后加载它们，这真的很重要吗？

需要明确的是-我们不是将延迟加载图像与加载所有图像进行比较。无论用户是否查看它们，所有图像都将被加载。

如果图像没有预加载，则您的$(window).load事件理论上会更早触发（理论上因为-请参见https://dev59.com/_XRB5IYBdhLWcg3wtJGF#545005中的注释）

但是，由于您似乎正在使用document.ready（我假设您使用相同的处理程序启动其余javascript），因此对于您的javascript执行来说，这不会有任何影响。

现在来谈谈占用带宽的图片问题 - 这取决于浏览器（请参见如何让浏览器（IE和Chrome）在请求脚本之前请求图片？）。因此，您可能会看到（取决于浏览器）图像下载阻塞后续脚本，从而延迟页面启动（请注意，对于IE，这还取决于您是使用普通img标签还是将图像作为CSS背景加载 - CSS背景图像最后加载）。

接下来是用户体验。如果您的图像很大（或者网络很慢），延迟加载图像可能会导致用户在图像完全加载之前实际上点击幻灯片。

- potatopeelings

Answer 2

以下是我的想法。

在网页上，图片通常占据了大部分下载的字节数。因此，优化图片通常可以带来最大的字节节省和网站性能改进。因此，按需加载图片是制作图像轮播/画廊的最佳方式。

其两个主要原因如下：

1）用户可能甚至不会滚动查看图片，所有这些图片（除了可见的第一张图片）都已经被无缘由地加载了。

2）带宽消耗 - 想想移动设备和使用有限数据计划的用户。这也会影响总页面加载时间，意味着页面加载时间将为5秒，而不是4.6秒。差异几乎不可察觉，但如果有50/100张图片，就会产生影响。

3）仅在需要时触发资源（任何资源，不仅仅是图片）下载，而不是全部加载，对于慢速连接是不利的。

我相信还有很多其他原因，但我会让您自己去发掘。

所以聪明的头脑们，请随意编辑和添加您的想法。

- lshettyl

---

但在上述情况下，图像不是“按需”加载的。它们只是在文档的其余部分加载完成后才被加载。因此，它仍然会加载所有图像。所以基本上你是说，“按需”加载很好。但是将图像延迟到DOM完全加载后有益吗？ - Marcus Lind