CODEWITHSUNDEEP
jqueryimageperformance
cwiggo
cwiggo

Reputation: 2599

Implement efficient JQuery Image Swap

I have around 10 links in my navigation. All of which have 2 images for example, main_image.png the picture that loads first, and the other that is not displayed called main_image_up.png This image is what I want to replace the first image with when I hover over it.

What would be the best method be/ technique to use, to incorporate all this large into a efficient function?

Here is my current code, simple structure, please note, all images will be different:

    <div>
<img src="http://cdn4.blogs.babble.com/strollerderby/files/2011/06/test-100x100.jpg"/>
    <p>Directory</p>
    </div>

JS FIDDLE

Thanks in advance, Chris

Upvotes: 0

Views: 63

Answers (1)

Xenolithic
Xenolithic

Reputation: 210

Personally, I would sprite your images and use CSS.

Take Newgrounds.com for example. Have a look at their navigation bar. When you hover over it / click it, the colours change.

Now look at the actual navigation bar image.

All 3 states are one image. All they do is shift the background position of the image depending on the state of the element.

I would prefer doing this because instead of loading 20 images (10 links / 2 images each), you only load one. That saves your browser from making 19 extra calls to the server, thus saving time and speeding things up!

Have a look on CSS-Tricks for a nice article explaining what they are, how to use them, etc.

Upvotes: 2

Related Questions