Javascript图片预加载策略答案

【问题标题】：Javascript image preload strategyJavascript图片预加载策略
【发布时间】：2010-10-08 08:27:57
【问题描述】：

像许多人一样，我已经做了很长时间的图像预加载，但并不总是很理性。所以我想出了这个关于使用 javascript 预加载图像的正确方法的简短想法。

应尽快执行图像预加载脚本。它应该放在 HTML 的顶部（在 HEAD 部分中），与其他位于 BODY 部分底部的脚本不同。
它不能依赖库（例如 jQuery），因为这会延迟执行。
不需要预加载 CSS 精灵和背景图像，因为 CSS（通常在 HTML 顶部调用）已经完成了这项工作（这当然减少了对 javascript 图像预加载的总体需求）。
可以在站点的每个页面上放置和运行预加载脚本，以确保无论用户进入站点的哪个页面都有效。（但是每次运行脚本的开销，如果只是为了检查现在缓存的图像呢？）

我很想听听您对此主题的意见。

【问题讨论】：

我只是想知道为什么你必须使用 JavaScript 图像预加载..？
您认为在所有情况下都真的没有必要吗？正如我所说，使用 css sprite 减少了对它的需求。但有时通过在不显示图像的页面上加载图像来加速处理过程可能很有用，使其为需要它的页面做好准备（比使用 onload 事件处理程序更有效）。我只是想听听你的想法。
我在等你证明我相反^^我真的不知道在哪种情况下它会改善页面的加载。
更多的是改善用户体验...

【解决方案1】：

应尽快执行图像预加载脚本。它应该放在 HTML 的顶部（在 HEAD 部分中），这与其他位于 BODY 部分底部的脚本不同。

这会优先考虑用户执行某项操作时可能显示的图像，然后是作为初始页面一部分的图像。（除非您尝试预加载作为初始页面一部分的图像，否则将是多余的）。

它不能依赖库（例如 jQuery），因为这会延迟执行。

这样的延迟应该不会很严重

不需要预加载 CSS 精灵和背景图像，因为 CSS（通常在 HTML 顶部调用）已经完成了这项工作（这当然减少了对 javascript 图像预加载的总体需求）。

如果样式表中提到的图像没有显示，浏览器可能会优化而不加载它们。

预加载脚本可以在站点的每个页面上放置和运行，以确保无论用户进入哪个页面都有效。（但是每次运行脚本的开销，如果只是为了检查现在缓存的图像呢？）

合理的缓存控制标头应该避免需要发出 HTTP 请求来检查图像的新鲜度，所以这应该可以忽略不计。

【讨论】：