Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

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

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.

1 Answer

You could use image sprites. The technique being that you load both images as one image initially and then reposition what is displayed using CSS.