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等速度测试没有显示任何差异。

Answer 1

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

为了清楚起见 - 我们不比较延迟加载图片与加载所有图片。无论用户是否观看，都将加载所有图像。

如果图像没有预先加载，你的$（window）.load事件理论上会更早发生（理论上是因为 - 请参阅https://stackoverflow.com/a/545005/360067中的评论）

但是因为你似乎正在使用document.ready（并且我假设你使用相同的处理程序来启动你的其余javascript），这对你的javascript执行没有任何影响。

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

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

Answer 2

以下是我的想法。

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

主要有两个原因：

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

2）带宽消耗 - 考虑有限数据计划中的移动设备和用户。它还影响总页面加载时间，这意味着页面加载时间将是例如5秒而不是4.6秒。这种差异几乎不可察觉，但是，如果有50/100张图像的话。

3）触发资源（任何资源，而不仅仅是图像）在需要时下载而不是加载它对于慢速连接都是不好的。

我确信还有很多其他原因，但是，我还是让你弄清楚。

非常棒的想法，请随时修改并添加您的想法。

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

2 个答案: