Javascript Gallery Performance

I'm creating image gallery with drag functionality (like on iPhone). It gets data from html div (more than 15 images possible):

<div class="mySlideshow">
  <img src="img1.jpg"/>
  <img src="img2.jpg"/>
  <img src="img3.jpg"/>      
  ...
  <img src="img15.jpg"/>
</div>

Now I see two ways how create it (transition using drag):

-Create 15 divs with background-image and show all them as one big strip.

-Create 3 div-containers and change their background-image property and position after transition complete.

What is the best way to cr开发者_JS百科eate this kind of gallery?

If you're worried about performance you could preload the next couple of "hidden" images whilst not loading all images when the page loads, like this.

However, your question seemed to be pointing at which of the two methods above you think would be best. I think the first would be better but I don't know why you'd use background-images rather than static images on the page? Unless I misunderstood how you were using the term "background-image". It'd probably be smoother to have all the images on a line with one div and scroll through them. Semantically, you could use a list rather than a div.

Use the second one if you want minimise the bandwidth usage at the cost of more code. Use the first one if you don't mind the bandwidth but since you mentioned more than 15, this may not be optimal.

The first method (loading all the images) may help prevent repaints an reflows, but the code for the drag transition will affect performance much more. take a look at the code on jcarousellite - it has always worked fast for me.