加载大量图像

Question

我正在开发一个网站，允许用户查看和配置产品。 我想用jquery，css3和html5来启动这个项目，并且适用于旧版浏览器。

我已经合并了几个精灵中的所有最小图像，以减少http请求的数量（图像将从无cookie的子域中提供）。 顺便说一下，对于每种配置组合，产品必须以360°的角度可见。 这产生2252个图像（总共15mb）。

这对bandwitdh来说不是一个大问题，因为我们有2个专用服务器，但我只是想着改善用户体验的最佳方式。

其实我只为预设的产品视图预先加载图像，然后当用户更改设置时，我加载所需的图像（jQuery在这里帮助）。当图像加载时，用户将选择“加载”gif。我还应该在图片还没有请求时预加载吗？

图像将被浏览器缓存，因此每个图像将是304 Not Modified响应。 您有任何建议或建议可以改善用户体验吗？

谢谢。

Answer 1

如果每个产品有2252张图像并且预加载了一张，开始预加载其他图像似乎有点无用。据推测，观众会改变他的选择，并且你需要2252张图像中的另一张。这是一个非常低的机会，你有这个图像预加载。

如果存在比其他更常见的各种“属性”，您可能需要预先选择少数几个？例如（我不知道你的产品是什么），如果你有一件红色的衬衫和一件粉红色格子XXXL衬衫，你可能需要先预先加载红色的衬衫;）

我在情况这是玩jQuery中的动画效果（淡入淡出，幻灯片等）。您可以在属性更改上淡出。该动画可能需要600毫秒，这将是从服务器获取该图像所需时间的很大一部分。结果是新视图/属性的等待时间更短。

Answer 2

从CDN像amazon s3服务的图像可能会稍微改善加载时间。至于预装阶段 - 这可能取决于产品。有些东西更有可能被轮换 - 例如，一辆汽车在landon说的话上。我个人不会打扰转动一件T恤，但可能是一辆汽车。所以这个决定可能是基于你网站的预期用途。