2

Мне нужно в цикле загрузить картинку и продолжить выполнение кода. Метода wait() у картинки нет :)
что мне такое написать в onload(), чтобы выполнение цикла продолжалось только после загрузки картинки?

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

UPD:

вот сам объект с путями картинок

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

1 Answers1

3

В данном случае можно так

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 Если images это object, то моя реализация такая

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);

Если картинка загрузится не успешно, то onload не выполнится

  • Я использую ассоциативный массив и перебор по индексам тут не подходит – iRumba Nov 24 '16 at 10:44
  • @iRumba ассоциативного массива в js нет, есть объекты, сейчас добавлю моё решение для объектов –  Nov 24 '16 at 11:02
  • @iRumba обновил ответ –  Nov 24 '16 at 11:14