On hover change the image. avoid http request every time on hover ?

[Salmen Bejaoui]

Hi, i’m working on e-commerce website. On the catalogue, each product image have a second link cached in a data attribute. On hover, i replace the original src with the data attribute link that make an http request to load the new image.

I would like to know, if there is another method to do the same job without making an http request on each hover event ?

Or if there is a method to load the data attribute images on background. ?

Thanks.

[shaneisme]

Well if the image is the same dimensions, you should look into css sprites.

https://css-tricks.com/css-sprites/

[itsLeon]

Well the option you have now is not bad. Because only the images that the user want to see are loaded (the hover image). The drawback is that the image is only loaded when the user hovers over it and triggering the request and then there can be a delay (because the image will be needed downloaded and renderd after that it becomes cache! if you want it so).

The other solution you are giving will cause alot more data usage for you and the user will the user only wanted to see 1 hover image.

So i say stick with what you have now

[Author]

Posts