优化图片的javascript预加载答案

【问题标题】：Optimize javascript pre-load of images优化图片的javascript预加载
【发布时间】：2009-06-06 15:49:01
【问题描述】：

我想知道是否有人有任何优化通过 javascript 预加载图像的策略？

我正在将一个 Flash 应用程序移植到 html/css 中，试图在尽可能接近原始站点的位置重新创建 UI。它本质上是一个照片浏览器应用程序，当用户将鼠标悬停在链接上时会显示高分辨率图像。每页大约有 50-80 张这样的图片。

单独预加载所有图像会产生比 Flash 应用程序更长的加载时间。数据量是相同的，但我不得不假设较长的加载时间是由于每个图像必须对服务器进行的往返次数。

此外，即使在图像被缓存之后，我也发现每个页面的加载时间都很长，因为页面仍然需要为每个图像与服务器联系以接收 304 Not Modified 代码。

有没有人有任何加快这个速度的建议？尝试创建一个在单个请求中下载的巨大图像精灵而不是每个请求一个请求的 50-80 个较小的图像是否有意义？这里的目标是实现与 Flash 网站相似的加载时间。

谢谢。我知道这听起来不太理想。

【问题讨论】：

标签： javascript flash optimization

【解决方案1】：

正如您所指出的 - 影响现代网页加载时间的最常见因素之一是客户端和服务器之间发送的大量小图像。最近的一些研究表明，对于 20 多张图片，您 80% 的加载时间将花费在执行这么多获取的延迟上，而不是实际执行下载！

名为 SmartSprites 的工具是一种非常方便的方法，可以从所有许多小图像中“编译”单个大图像，这将实现更快的加载时间和图像的预取。这是链接 http://smartsprites.osinski.name/

【讨论】：

有没有机会链接到那些“最近的研究”？我有兴趣了解更多。
是的，对不起，马虎！这是引文，但您可以在此处阅读更多相关信息：websiteoptimization.com/speed/tweak/parallel Yuan, J.、Chi, C.H. 和 Q. Sun，“A More Precise Model for Web Retrieval”，WWW 2005，5 月 10-14 日, 2005, Chiba, Japan.. 研究人员发现对象的定义时间 (DT) 和等待时间 (WT) 对 Web 对象检索的总延迟有显着影响，但在对象级研究中它们在很大程度上被忽略了。 DT 和 WT 占总等待时间的 50% 到 85%，具体取决于页面中的对象数量。

【解决方案2】：

我会说使用 CSS sprites 是一件大事。将所有图像或类似性质的图像放在一个 HTTP 请求上确实有助于缩短加载时间。下载 10 个总文件大小为 100kb 的图像将比下载 1 个相同大小的图像慢。在悬停和鼠标悬停事件的情况下，它还有助于在需要图像之前放下图像，并且它们通常会使事情变得更流畅。

Here is an article on them.

【讨论】：

【解决方案3】：

如果您对这个解决方案没有意见，那么使用精灵是很好的。此外，我会尝试检测该浏览器中的 data URI 支持，并让脚本根据该信息加载不同的样式表。一个样式表具有 base 64 编码的数据 URI，另一个样式表具有精灵的真实 URL。 CSS 文件也是可缓存的。

这是一个technique to detect data URIs support，或者您可以使用 IE 条件 cmets 或...在多部分 HTTP 响应中，有一些 workarounds for sending IE encoded image strings。

【讨论】：

【解决方案4】：

如果你不是马上需要所有的图片，你可以在页面初始化后使用window.timeout()函数做一些工作。

另外，如果您在多个地方使用一张图片，您可以通过将图片放入 CSS 样式并重用该样式而不是图片来避免多次调用服务器。

【讨论】：

【解决方案5】：

使用Sprite Me。还有不要错过blog posts关于这个工具的creation。

【讨论】：