Preload several images before displaying them

Question

I have this code

var html = '';
data.forEach(function (item, index) {
   html += '<img src="' + item.src + '">';
}
$('.container').append(html);

How do I wait until the images are preloaded before displaying them?

I saw something like that :

var img=new Image();
img.src=url;

But how do I know when the images have finished being preloaded in order to call the append() function ?

Possible duplicate of [JavaScript Preloading Images](https://stackoverflow.com/questions/3646036/javascript-preloading-images) — Ethan, Nov 23 '18 at 04:21

score 0 · Answer 1 · answered Nov 23 '18 at 04:59

The difference in your two examples is that one is creating the images through the Image API while the other is doing it through string concatenation.

The anti how to wait till all the images have load is to set a conditional that test if they all been created.

var html = '';
data.forEach(function (item, index) {
   if( data[index] !== -1){
       html += '<img src="' + item.src + '">';
   } else {
       $('.container').append(html);
   }
}

Preload several images before displaying them

1 Answers1