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?