I’m developing a website that allows the user to see and configure a product.
I wanted to start this project using jquery, css3 and html5 with a graceful degradation for older browsers.
I’ve combined all the smallest images in several sprites to reduce the number of http requests (the images will be served from a cookieless subdomain).
By the way the product must be viewable in 360° for each combination of configurations.
This produces 2252 images (15mb total).
This is not a big issue for the bandwitdh since we have 2 dedicated servers, but I’m just thinking about the best way to improve the user experience.
Actually I only preload images for the default product view, then when the user changes settings I load the needed images (jQuery helps here). When the images are loading the user will se a “loading” gif. Should I preload images also when it does not request them?
Images will be cached by the browser so each image will be a 304 Not Modified response.
Do you have any advice or suggestion to improve the user experience?
Thank you.
if you have 2252 images per product and you preload one, it seems a bit futile to start preloading others. Presumably the viewer changes his selection and you need another one of the 2252 images. That’s a very low chance that you’d have that image preloaded.
If there are various “attributes” that are more common than others, you might want to preload a select few? For example, (I don’t know what your product is), if you have a red shirt and a pink plaid XXXL shirt, you might want to preload the red one first 😉
One thing I do in situations like this is to play with the animation effects in jQuery (fade, slide, etc). You can fadeOut on attribute change. That animation will take perhaps 600 milliseconds which would be a good chunk of the time required to go and fetch that image from the server. The result is a perceived lower waiting time for the new view/attribute.