This question has already been answered:

I need to load a picture in a loop and continue with the code. There is no wait () method for the picture :)
What should I write in onload() so that the execution of the cycle continues only after the image is loaded?

 for(var i in images){ var img = new Image(); img.src = images[i]; img.onload(тут код); }

UPD:

here is the object itself with the paths of the pictures

 var images = { "image1": "screen001.PNG", "image2": "Снимок.PNG", "image3": "doctype.png" };

Reported as a duplicate at Grundy. javascript Nov 24 '16 at 9:50 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    1 answer 1

    In this case, you can

     var images = []; function loadImage(index) { var img = new Image(); img.src = images[index]; img.onload = function() { if (index + 1 < images.length) { loadImage(index + 1); } }; } loadImage(0);

    UPD If images are object , then my implementation is

     var images = { "image1": "screen001.PNG", "image2": "Снимок.PNG", "image3": "doctype.png" }; var arr = getObjectKeys(images); function getObjectKeys(o) { var tmp = []; for (var key in o) { tmp.push(key); } return tmp; } function loadImage(index) { var img = new Image(); img.src = images[arr[index]]; img.onload = function() { if (index + 1 < arr.length) { loadImage(index + 1); } }; } loadImage(0);

    If the picture does not load successfully, then onload will not be executed.

    • I use an associative array and iteration over indices is not suitable here - iRumba
    • @iRumba there is no associative array in js , there are objects, now I will add my solution for objects - Stanislav Grot
    • @iRumba updated the answer - Stanislav Grotto