我在每一页上都有一个幻灯片，其中包含页面所涉及对象的图像。每个幻灯片通常包含5-6张图像幻灯片。
我想的是，只在前两个图像上设置src属性，在其余图像上，我只为图像文件设置data-src属性，然后在整个页面加载后，我加载其余图像
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没有任何区别。
那么，如果我在页面加载时加载它们，或者如果我在页面加载后加载它们？
需要明确的是，我们不是比较延迟加载图像与加载所有图像。无论用户是否观看，都将加载所有图像。
如果图像没有预先加载，那么您的$(window).load事件理论上会提前触发(理论上是因为-请参阅中的注释https://stackoverflow.com/a/545005/360067)
但是，由于您似乎在使用document.ready(我认为您使用相同的处理程序来启动其余的javascript)，这对您的javascript执行没有影响。
现在，说到占用带宽的图像，它因浏览器而异(请参阅如何让浏览器(IE和Chrome)在脚本之前请求图像？)。因此，你可能会(取决于浏览器)看到下载的图像阻碍了后续脚本，从而延迟了页面启动(注意，对于IE，这也取决于你是否使用普通img标签与加载图像作为css背景-css背景图像是最后加载的)
接下来是用户体验。如果您的图像很大(或网络速度较慢)，延迟加载图像可能会导致用户在图像完全加载之前实际点击幻灯片。
以下是我的想法。
图像通常占网页上下载字节的大部分。因此，优化图像通常可以为您的网站节省最大的字节数并提高性能。因此，按需加载图像是执行图像转盘/库的最佳方式。
两个主要原因是：
1) 用户甚至可能不会滚动浏览图像，并且所有这些图像(除了可见的第一个图像)都已被无故加载。
2) 带宽消耗——想想移动设备和有限数据计划中的用户。它还影响总页面加载时间，这意味着页面加载时间将为5秒，而不是4.6秒。这种差异几乎不明显，但如果有50/100的图像，就会明显。
3) 触发资源(任何资源，而不仅仅是图像)在需要时下载，而不是全部加载，这对慢速连接不利。
我相信还有很多其他的原因，但是，我还是让你来弄清楚。
如此伟大的头脑，请随时编辑和添加您的想法。