Fetch and display multiple images asynchronously

Question

I'm new to Javascript and i'm trying to fetch and display some images asynchronously. Here is what i've tried so far,

for (i=0; i<10; i++){

  var _image= new Image();
  _image.onload = function(){

    var id= "image".concat(i);                    
    document.getElementById(id).src = this.src;

    };

  _image.src = urls[i]);

}

As expected when the onLoad event fires i does not start from zero, thus images don't display correctly. What's the proper way to do this?

use `for (let i` and that should already do the trick (though I don't see why you use `"image".concat(i)` ) — Icepickle, Sep 03 '18 at 14:59
By their very nature, asynchronous operations started immediately one after another are not guaranteed to finish in the order in which they were started. — Madara's Ghost, Sep 03 '18 at 15:15

phil.p · Answer 1 · 2018-09-03T15:21:01.420

The images are probably displaying out of order for a different reason. When you fetch or display an image asynchronously, each image will take a different amount of time to complete that process.

Imagine for instance that image 4 is huge and image 5 is tiny. Image 5 is likely to be displayed before image 4. Therefore, I would presume that you are not fetching the images out of order, but displaying them out of order.

The easiest solution is to change your display logic or to fetch and display these images sequentially by wrapping each fetch+display in a promise.

Also, you should use for (let i = 0 ...) in your for loop.

score 1 · Accepted Answer · answered Sep 03 '18 at 15:19

There is just one global value for i, and once all images have been loaded it is probably already set to 10. You could use let, which will make your counter scoped. This way, each of your image callbacks will have a copy of the current counter value.

for (let i=0; i<10; i++){

  var _image= new Image();
  _image.onload = function(){

    var id= "image".concat(i);                    
    document.getElementById(id).src = this.src;

    };

  _image.src = urls[i]);

}

You can read more about that here.

Fetch and display multiple images asynchronously

2 Answers2