Javascript图像预加载策略

Question

像许多人一样，我长期以来一直在进行图像预加载，但并不总是非常理性。因此，我想出了这个关于使用 javascript 预加载图像的正确方法的简短想法列表。

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

我很想听听您对这个主题的看法。

Answer 1

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

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

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

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

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

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

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

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