加载大量图像

Question

我正在开发一个网站，允许用户查看和配置产品。我想开始这个项目时使用的是jquery，css3和html5，在老的浏览器上有一个优雅的降级。

我已经将所有最小的图像合并到几个sprites中，以减少http请求的数量(图像将从一个无combined的子域提供)。顺便说一句，对于每种配置组合，产品必须是360度可见的。这将生成2252张图像(总共15MB)。

这对bandwitdh来说不是什么大问题，因为我们有两台专用服务器，但我只是在考虑改善用户体验的最好方法。

实际上，我只为默认的产品视图预加载图像，然后当用户更改设置时，我加载所需的图像(jQuery在这里提供帮助)。当图像加载时，用户将看到一个“加载”gif。当它没有请求图像时，我是否也应该预加载图像？

图像将由浏览器缓存，因此每个图像都将是304 Not Modified响应。你有什么建议或建议来改善用户体验吗？

谢谢。

Answer 1

如果你每个产品有2252张图片，并且你预加载了一个，那么开始预加载其他图片似乎有点徒劳。想必观众改变了他的选择，你需要2252张图片中的另一张。这是一个非常低的机会，你已经预先加载了该图像。

如果有比其他属性更常见的各种“属性”，您可能想要预加载一些？例如，(我不知道你的产品是什么)，如果你有一件红色衬衫和一件粉色格子XXXL衬衫，你可能想先预装红色的那件;)

在这种情况下，我做的一件事就是在jQuery中使用动画效果(淡入淡出、滑动等)。您可以在属性更改时执行fadeOut。该动画可能需要600毫秒，这将是从服务器获取图像所需的大量时间。结果是新视图/属性的等待时间缩短了。

Answer 2

从像亚马逊s3这样的CDN提供图像可能会稍微减少加载时间。至于分步预加载--这可能取决于产品。有些东西更有可能被旋转--例如，一辆车超过了兰登所说的内容。我个人不会费心旋转一件t恤，但可能是一辆车。所以这个决定可能是基于你的网站的预期用途。