Javascript图像预加载策略

Question

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

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

我很想听听你对这个问题的看法。

Answer 1

  

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

如果用户在作为初始页面一部分的图像上执行某些操作，则会对可能显示的图像赋予更高的优先级。 （除非您尝试预加载作为初始页面一部分的图像，这将是多余的）。

  

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

这种延迟不应该很重要

  

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

如果没有显示样式表，浏览器可以优化并不加载样式表中提到的图像。

  

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

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