Using CSS Sprites for 'slideshow' elements?

Question

On web page there is a block with some advertise (slideshow of about 3-4 images). Images are not loaded from database or something like this - they are static. Images should change themselves.

I have to 2 ideas for doing this:

1. Preloading images in JS by new Image(). And switching by changing src attribute
2. Joining this images into 1 sprite and changing background-position of image

What way is faster and better?

P.S. I see negative part in second way, that if it's needed to change or add a picture - whole sprite should be remade.

Answer 1

Sprites are beneficial for a lot of smaller images to save on amount of http requests as there is some overhead to it. If you're planning on displaying large JPGs/PNGs then you should consider that the user will have to download all the images upfront if they are in sprite mode, where as if they are split they will be able to see the first image while you load the other ones in the background.

Answer 2

Option 2 is better for things that don't change often, such as nav elements. If these change often, I would say go with option 1 because of the drawback that you mentioned.

EDIT:

In fact, you could use/create an image rotator that reads all the image files in a certain directory and rotates them automatically. That would probably make for the easiest maintenance.