jquery - 为产品定制界面加载图像的最佳实践

Question

我目前正在构建一个产品定制界面，用户可以在其中为包的不同组件选择颜色并实时查看预览，如下所示:https://hudson-sutler-dev.myshopify.com/products/weekender

我的设置方式:袋子的不同组件是作为透明 PNG 相互叠加的图像。当用户选择一个颜色样本时，$.attr jQuery 函数被触发以换出主图像上的 img src——新的 src 是从实际样本派生的数据属性。

问题:使用界面时，您会注意到用户点击和图像的实际加载之间存在相当长的延迟——我理解为什么它实际上是在样本上加载新的分层图像点击。这会导致一些非常糟糕的用户体验。

有谁知道这方面的最佳做法是什么？我应该在页面加载时立即加载所有图像吗？这个问题有哪些有趣的实现？

Answer 1

考虑到您当前的 Assets ，缩短响应时间的一种方法是将所有图像加载为隐藏的 HTML 元素。其中一些将受益于在被请求时已经加载。

但是，这将以增加用户流量为代价，并且您的绝大多数图像将在不需要的情况下加载。由于今天的大部分流量都是移动的，这真的非常糟糕。恕我直言，比你现在拥有的要糟糕得多。

但是你有其他选择:

1. 预加载较小的、模糊的图像，刚好足够大以至于它们看起来不会很糟糕，在加载后(单击后)立即淡化高分辨率图像，创建一个很好的聚焦效果.这是电子商务网站上常用的技巧，如果做得好，它会非常吸引眼球。或者……

2. 考虑到您的特定用例，通过结合亮度和< em>darkness 在您选择的照片编辑器中添加图层，并在容器 div 上方渲染此蒙版，仅更改背景颜色。简单、有效，我向你保证，没有人能够分辨出其中的区别。如果您的包有不同的纹理，您显然需要不止一个面具，但这比每种颜色都有一张图片要好得多。

3. 上述方法的替代方法是使用单个图像和 CSS filters (hue-rotate 和 saturate)。但请记住，它们并不完全 supoprted . This example非常接近您所追求的。

2. 和 3. 允许色调旋转动画。