Download Images In Specific Order

I am implementing a feature that displays a 360 degree view of a product. The view is represented by a sequence of stand alone images that are downloaded from the server. From the

Solution 1:

You can load the most important images in a first wave and then the other ones like this :

var firstImages = [];
var otherImages = [];

var count = firstImages.length;

var onloadfirstwave = function() {
   if (--count==0) {
      // lauches second wave
   }
};
// and for each image, do
firstImages[i].onload = onloadfirstwave;
firstImages[i].src = "someurl";

The second wave would be launched only after the first images are loaded and the parallelism of those first load would be preserved.

Solution 2:

Why not just use setTimeout and have a slightly increased delay (500ms) between each image.

Solution 3:

The browser handles asynchronous loading for you, and is also what will limit the number of parallel downloads. Just preload the images the normal way. You don't need anything special.

Solution 4:

The html can be created in js or html. Html version: ...

var images = ['img1.jpg','img2.jpg',...],
    index = 0;
functionload_next_image(){
  if(index<images.length){
    // if you want to create the img from js// this is the place to do so
    $('#img'+index).attr('src',images[index]).onload(load_next_image);
    index++;
  }else{
    // all images loaded
  }
}
load_next_image()