优化javascript预加载图像

Question

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

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

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

此外，即使在缓存图像后，我也在查看每个页面的显着加载时间，因为页面仍然需要联系服务器以获取每个图像以接收304 Not Modified代码。

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

感谢。我知道这听起来并不像是一种理想的做事方式。

Answer 1

正如您所指出的 - 影响现代网页加载时间的最常见因素之一是客户端和服务器之间发送的大量小图像。最近的一些研究表明，对于超过20张图像，80％的加载时间将用于完成这些操作的延迟，而不是实际进行下载！

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

Answer 2

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

Here is an article on them.

Answer 3

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

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

Answer 4

如果您不需要立即显示所有图像，可以使用window.timeout（）函数在页面初始化后完成一些工作。

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

Answer 5

使用Sprite Me。关于此工具的blog，请不要错过posts creation。