使用 Javascript 延迟加载图像有什么好处吗？答案

【问题标题】：Is there any benifit to delay loading of images with Javascript?使用 Javascript 延迟加载图像有什么好处吗？
【发布时间】：2015-07-07 02:54:46
【问题描述】：

我在每个页面上都有一个幻灯片，其中包含页面所涉及的对象的图像。每个幻灯片通常包含 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 这样的速度测试没有任何区别。

【问题讨论】：

这是个好问题。加载 1 张图片must 加载更多图片更快。所以一切都取决于你的延迟加载方法。
是的，但它是否有助于更快地加载 DOM 的其余部分？因为这就是重点。如果我一个接一个地加载 5 个图像，或者如果我加载 1 个，那么 DOM 的其余部分，然后是其他 4 个图像。是否有任何性能提升或感知性能提升？
是的，它会更快。我不知道快了多少。但是，如果您不加载图像，那可能会破坏您的滑块。记住这一点。
@LShetty，将您的评论转换为答案，再添加几个示例，您将获得一个成功的答案，我会很乐意投票。
@Alex 完成，谢谢 :)

标签： javascript jquery html performance

【解决方案1】：

这是我的想法。

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

两个主要原因是：

1) 用户甚至可能无法滚动浏览图像，并且所有这些图像（可见的第一张图像除外）都已无缘无故地加载。

2) 带宽消耗 - 考虑使用有限数据计划的移动设备和用户。它还会影响总页面加载时间，这意味着页面加载时间将是例如 5 秒而不是 4.6 秒。差异几乎不明显，但如果有 50/100 个图像，差异就会很明显。

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

我敢肯定还有很多其他原因，但是，我会让你自己弄清楚。

如此伟大的思想，请随时编辑并添加您的想法。

【讨论】：

但在上述情况下，图像不是“按需”加载的。当文档的其余部分已加载时，它们才被加载。所以它仍然加载所有图像。所以基本上你是说，“按需”加载是好的。但是将图像延迟到 DOM 完全加载后？有好处吗？

【解决方案2】：

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

明确一点 - 我们不比较延迟加载图片和加载所有图片。无论用户是否查看它们，都会加载所有图像。

如果没有预先加载图像，您的 $(window).load 事件理论上会提前触发（理论上是因为 - 请参阅 https://stackoverflow.com/a/545005/360067 中的 cmets）

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

现在，来看看占用带宽的图像 - 它因浏览器而异（请参阅How to make the browser (IE and Chrome) request images before scripts?）。因此，您可能（取决于浏览器）看到图像下载会阻止后续脚本并因此延迟页面启动（请注意，对于 IE，它还取决于您是否使用普通的 img 标签与将图像加载为 css 背景 - css 背景图像最后加载）

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

【讨论】：