为产品定制界面加载图像的最佳实践
Best practices on loading images for a product customization interface
我目前正在构建一个产品定制界面，用户可以在其中为包的不同组件 select 颜色并实时查看预览，如下所示：https://hudson-sutler-dev.myshopify.com/products/weekender
我的设置方式：袋子的不同组件是图像，它们作为透明 PNG 相互叠加。当用户 select 一个色样时，$.attr jQuery 函数被触发以换出主图像上的 img src——新的 src 来自实际色样作为数据属性。
问题：在使用界面时，您会注意到用户点击和实际加载图像之间存在相当长的延迟——我理解这是为什么，因为它实际上是在加载新的分层图像单击样本后。这会导致一些非常糟糕的用户体验。
有谁知道这方面的最佳做法是什么？我应该在页面加载时立即加载所有图像吗？这个问题有哪些有趣的实现？
考虑到您当前的资产，缩短响应时间的一种方法是将所有图像加载为隐藏的 HTML 元素。其中一些将受益于在被请求时已经加载。
但是，这将以增加用户流量为代价，并且您的绝大多数图像将在不需要的情况下加载。由于今天的大部分流量都是移动的，这真的非常糟糕。恕我直言，比你现在拥有的要糟糕得多。
但你还有其他选择：
预加载较小的、模糊的图像，刚好足够大，看起来不会很糟糕，加载后（单击后）立即淡化高分辨率图像，创建一个不错的聚焦效果。这是电子商务网站上常用的技巧，如果做得好，它会非常吸引眼球。或者...
考虑到您的特定用例，为每种类型的包创建一个 b/w .png 文件，结合来自 lightness 和 暗度 层在您选择的照片编辑器中，并在容器上方渲染此蒙版 div 仅更改背景颜色。简单、有效，我向你保证，没有人能够分辨出其中的区别。如果你的包包有不同的纹理，你显然需要不止一个面具，但这比每种颜色都有一张图片要好得多。
上面的替代方法是使用单个图像，CSS filters (hue-rotate and saturate). But keep in mind they're not fully supoprted. This example 非常接近您想要的。
2. 和 3. 允许色调旋转动画。
我目前正在构建一个产品定制界面，用户可以在其中为包的不同组件 select 颜色并实时查看预览，如下所示：https://hudson-sutler-dev.myshopify.com/products/weekender
我的设置方式：袋子的不同组件是图像，它们作为透明 PNG 相互叠加。当用户 select 一个色样时，$.attr jQuery 函数被触发以换出主图像上的 img src——新的 src 来自实际色样作为数据属性。
问题：在使用界面时，您会注意到用户点击和实际加载图像之间存在相当长的延迟——我理解这是为什么，因为它实际上是在加载新的分层图像单击样本后。这会导致一些非常糟糕的用户体验。
有谁知道这方面的最佳做法是什么？我应该在页面加载时立即加载所有图像吗？这个问题有哪些有趣的实现？
考虑到您当前的资产，缩短响应时间的一种方法是将所有图像加载为隐藏的 HTML 元素。其中一些将受益于在被请求时已经加载。
但是，这将以增加用户流量为代价，并且您的绝大多数图像将在不需要的情况下加载。由于今天的大部分流量都是移动的，这真的非常糟糕。恕我直言，比你现在拥有的要糟糕得多。
但你还有其他选择：
预加载较小的、模糊的图像，刚好足够大，看起来不会很糟糕，加载后（单击后）立即淡化高分辨率图像，创建一个不错的聚焦效果。这是电子商务网站上常用的技巧，如果做得好，它会非常吸引眼球。或者...
考虑到您的特定用例，为每种类型的包创建一个 b/w
.png文件，结合来自 lightness 和 暗度 层在您选择的照片编辑器中，并在容器上方渲染此蒙版 div 仅更改背景颜色。简单、有效，我向你保证，没有人能够分辨出其中的区别。如果你的包包有不同的纹理，你显然需要不止一个面具，但这比每种颜色都有一张图片要好得多。上面的替代方法是使用单个图像，CSS filters (
hue-rotateandsaturate). But keep in mind they're not fully supoprted. This example 非常接近您想要的。
2. 和 3. 允许色调旋转动画。