Question

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 point of view of the user experience, some images in the sequence are more important than the others. So when my code downloads images I would like to fetch the important ones first and display them immediately, and then fetch less important ones.

I know that I can order my images by their importance and download them sequentially, one after another, but I would like to take advantage of asynchronous downloading to reduce the bandwidth too.

Can anyone recommend anything here?

Answer 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.