1

I'm currently building a product customizer interface where users are able to select colors for the different components to a bag and view a preview in real-time, like so: https://hudson-sutler-dev.myshopify.com/products/weekender

The way I have it set up: the different components to the bag are images taht are layered on top of each other as transparent PNGs. When a user selects a color swatch, the $.attr jQuery function is triggered to swap out the img src on the main image--the new src is derived from the actual swatches as data attributes.

The problem: when using the interface, you'll notice that there is quite a bit of a lag between user click and the actual loading of the image--I understand why as it is actually loading the new layered image upon swatch click. This makes for some pretty bad user experience.

Does anyone know what would be best practices for this? Should I just load all the images at once upon page load? What are some interesting implementations for this problem?

sunny
  • 150
  • 1
  • 10

1 Answers1

1

Considering your current assets, one way of improving response time would be to load all images as hidden HTML elements. Some of them will benefit from already being loaded when they are requested.

However, this will come at the expense of increased traffic for your users and the vast majority of your images will be loaded without ever being needed. Since most of today's traffic is mobile, that's really, really bad. Far worse than what you have now, IMHO.

But you have alternatives:

  1. Pre-load smaller, blurred images, just big enough that they don't look very bad, fading the high-res image over as soon as its loaded (after click), creating a nice focus-in effect. This is a commonly used trick on e-commerce websites and, when done right, it's quite eye-catchy. Or...

  2. Considering your particular use-case, create one single b/w .png file for each type of bag from combining transparency masks from both lightness and darkness layers in your photo-editor of choice and render this mask above a container div only changing background color. Simple, effective and, I assure you, no one will be able to tell the difference. If your bags have different textures, you'll obviously need more than 1 mask, but it's far better than having an image for each color.

  3. An alternative to the above is to use a single image and CSS filters (hue-rotate and saturate). But keep in mind they're not fully supoprted. This example is pretty close to what you're after.

2. and 3. allow hue-rotation animations.

tao
  • 59,850
  • 12
  • 84
  • 110
  • This is a solid answer! I'm actually going to try loading everything at once and observe the performance level on mobile there. What would be the best way to have hidden HTML elements, would it just be display:none or visibility:hidden? I know that sometimes the HTML elements actually don't even load until it is visible... – sunny Apr 19 '17 at 13:44
  • In the past, [display:none](http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading) was enough. However, browsers are getting smarter. I'd go for `position: absolute;z-index: -1;width:0;height:0;`. You can actually place them inside an invisible parent, so you don't have to put the code on each. Obviously, it will also need `overflow:hidden;`. – tao Apr 19 '17 at 13:50