我目前正在构建一个产品定制器界面，用户可以在其中为包中的不同组件选择颜色并实时查看预览，如下所示：https://hudson-sutler-dev.myshopify.com/products/weekender
我设置它的方式：袋子的不同组件是图像，它们作为透明的PNG彼此叠加。当用户选择颜色样本时，触发$ .attr jQuery函数以交换主图像上的img src - 新的src从实际样本派生为数据属性。
问题：当使用界面时，您会注意到用户点击和图像的实际加载之间存在相当长的滞后 - 我理解为什么因为它实际上是在样本上加载新的分层图像单击。这会带来一些非常糟糕的用户体验。
有谁知道最佳做法是什么？我应该在页面加载时立即加载所有图像吗？这个问题有哪些有趣的实现？
答案 0 :(得分：1)
考虑到您当前的资产，改善响应时间的一种方法是将所有图像加载为隐藏的HTML元素。其中一些将受益于在请求时已经加载。
但是，这将以增加用户流量为代价，绝大部分图片都可以在不需要的情况下加载。由于今天的大部分流量都是移动的，这真的非常糟糕。比你现在的情况要糟糕得多，恕我直言。
但你有其他选择：
预加载较小的，模糊的图像，只要它们看起来不是很糟糕，一旦加载（点击后）就会使高分辨率图像褪色，从而产生良好的聚焦效果。这是电子商务网站上常用的技巧，如果做得好，它会引人注目。或...
考虑到您的特定用例，为每种类型的包创建一个单独的b / w .png文件，组合来自亮度和黑暗<的透明度蒙版/ em>选择照片编辑器中的图层，并将此蒙版渲染到容器div上方，仅更改背景颜色。简单，有效，我保证，没有人能够分辨出来。如果你的包包有不同的纹理，你显然需要超过1个面具，但它比每种颜色的图像要好得多。
上述选项的替代方法是使用单个图片CSS filters（hue-rotate和saturate）。但请记住，他们并不完全supoprted。 This example非常接近你所追求的目标。
2。和 3。允许色调旋转动画。