加载大量图像
我正在开发一个网站，允许用户查看和配置产品。 我想使用 jquery、css3 和 html5 来启动这个项目，并为旧浏览器提供优雅的降级。
我将所有最小的图像组合在几个精灵中，以减少 http 请求的数量（图像将从无 cookie 的子域提供）。 顺便说一句，对于每种配置组合，产品必须能够 360° 可视。 这会生成 2252 个图像（总共 15mb）。
对于 bandwitdh 来说这不是一个大问题，因为我们有 2 台专用服务器，但我只是在考虑改善用户体验的最佳方法。
实际上，我只为默认产品视图预加载图像，然后当用户更改设置时，我加载所需的图像（jQuery 在这里提供帮助）。当图像加载时，用户将看到一个“正在加载”的 gif。当它不请求图像时，我是否也应该预加载图像？
图像将由浏览器缓存，因此每个图像都将是 304 Not Modified 响应。 您对改善用户体验有什么意见或建议吗？
谢谢。
I'm developing a website that allows the user to see and configure a product.
I wanted to start this project using jquery, css3 and html5 with a graceful degradation for older browsers.
I've combined all the smallest images in several sprites to reduce the number of http requests (the images will be served from a cookieless subdomain).
By the way the product must be viewable in 360° for each combination of configurations.
This produces 2252 images (15mb total).
This is not a big issue for the bandwitdh since we have 2 dedicated servers, but I'm just thinking about the best way to improve the user experience.
Actually I only preload images for the default product view, then when the user changes settings I load the needed images (jQuery helps here). When the images are loading the user will se a "loading" gif. Should I preload images also when it does not request them?
Images will be cached by the browser so each image will be a 304 Not Modified response.
Do you have any advice or suggestion to improve the user experience?
Thank you.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果每个产品有 2252 个图像并且预加载了一个，那么开始预加载其他图像似乎有点徒劳。据推测，观看者更改了他的选择，并且您需要 2252 个图像中的另一幅图像。您预加载该图像的可能性非常低。
如果有多种“属性”比其他属性更常见，您可能想预加载一些选定的属性？例如，（我不知道你的产品是什么），如果你有一件红色衬衫和一件粉色格子 XXXL 衬衫，你可能想先预加载红色的;）
在这种情况下我做的一件事就是玩使用 jQuery 中的动画效果（淡入淡出、滑动等）。您可以在属性更改时淡出。该动画可能需要 600 毫秒，这将是从服务器获取该图像所需的大部分时间。结果是新视图/属性的等待时间明显缩短。
if you have 2252 images per product and you preload one, it seems a bit futile to start preloading others. Presumably the viewer changes his selection and you need another one of the 2252 images. That's a very low chance that you'd have that image preloaded.
If there are various "attributes" that are more common than others, you might want to preload a select few? For example, (I don't know what your product is), if you have a red shirt and a pink plaid XXXL shirt, you might want to preload the red one first ;)
One thing I do in situations like this is to play with the animation effects in jQuery (fade, slide, etc). You can fadeOut on attribute change. That animation will take perhaps 600 milliseconds which would be a good chunk of the time required to go and fetch that image from the server. The result is a perceived lower waiting time for the new view/attribute.
从像 amazon s3 这样的 CDN 提供图像可能会稍微缩短加载时间。至于分步预加载 - 这可能取决于产品。有些东西更有可能被轮换——例如兰登所说的汽车。我个人不会费心在衬衫上轮换，但可能是在汽车上。因此，该决定可能基于您网站的预期用途。
Serving the images from a CDN like amazon s3 might improve the load times a little. As for preloading in steps - that might depend on the product. Somethings are more likely to be rotated - for example a car over what landon said. I personally wouldn't bother rotating a t shirt, but a car probably. So the decision might be based on the expected use of your site.