优化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个图像慢。 在徘徊和鼠标悬停事件的情况下，它还可以帮助图像在需要之前降下来，并且它们通常会使事情变得更加顺畅。

这是关于它们的文章。

Answer 3

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

这是一种检测数据URI支持的技术，或者您可以使用IE条件注释或...在多部分HTTP响应中有一些解决方法用于发送IE编码图像字符串 。

Answer 4

使用Sprite Me 。 并且不要错过有关创建此工具的博客 文章 。

Answer 5

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

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