0

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

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

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

4

1 回答 1

2

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

如果用户执行某项操作，则可能显示的图像优先于初始页面中的图像。（除非您尝试预加载作为初始页面一部分的图像，否则将是多余的）。

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

这样的延迟应该不重要

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

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

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

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

于 2010-10-08T08:34:18.230 回答