优化图像的JavaScript预加载 [英] Optimize javascript pre-load of images

问题描述

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

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

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

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

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

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

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

I was wondering if anyone has any strategies for optimizing the pre-loading of images via javascript?

I'm porting a Flash application into html/css, attempting to recreate the UI as close to the original site as possible. It's essentially a photo browser application, where a high-res image is shown when the user hovers over a link. There's about 50-80 of these images per page.

Pre-loading all the images individually creates a load time significantly longer than that of the Flash application. The amount of data is the same, but I have to assume the longer load time is due to the number of round trips that have to be made to the server for each image.

Also, I'm looking at a significant load time for each page even after the images have been cached, because the page still needs to contact the server for each image to receive the 304 Not Modified code.

Does anyone have any suggestions for speeding this up? Would it make sense to possibly try creating one huge image sprite that gets downloaded in a single request rather than 50-80 smaller images that each take a single request? The goal here is achieve a similar load time to the Flash site.

Thanks. I know this doesn't sound like an ideal way to do things.

解决方案

As you pointed out - one of the most common factors that influences load times for modern web pages are the huge number of small images being sent between the client and server. Some recent studies indicate that for more than 20 images, 80% of your load time is going to be spent in the latency of doing these many gets, not actually doing the downloading!

A tool called SmartSprites is a very handy way to "compile" a single large image from all of your many little images which will accomplish both much faster load times and the prefetching of images. Here's the link http://smartsprites.osinski.name/

这篇关于优化图像的JavaScript预加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！