Run a function when all images are loaded

Question

I use a function like this to load images from an array:

for (var i = 0; i < images_list.length; i++) {
            var img = new Image();
            img.onl         


        

Answer 1

You should not use it inside the loop. It will show all images loaded till ith iteration and not all loaded images if that's what you're trying to say. Just add this as the first line of the loop

if (i==images_list.length) {showImages(images_objects);}

What I understand is you want to display them once all of them have been loaded.

Answer 2

Just use a helper function to store the newly loaded image and to check to see if all images have been loaded, might work.

...
img.onload = function() {
    storeLoadedImage(this);
};
...

var storeLoadedImage = function(image) {
    images_objects.push(image);

    if (images_objects.length === images_list.length) {
        showImages(images_objects);
    }
};