Где я должен использовать img.onload в этой ситуации?

Question

Помогите мне, пожалуйста, понять, где я должен Image.onload to drawImage правильно?

Моя ситуация:

я загружаю мои изображения из Json файла и сохранять их в массиве (imgArray это массив с фотографиями ссылок):

var xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'img/img.json', false); 
     xhr.send(); 
     imgArray = JSON.parse(xhr.response); 

Чем я создаю функцию, примите мои imgArray и делает новые изображения для каждой ссылки и поместить их в новый массив:

function loadImage(ImgArray){ 

    var pics = []; 
    var img; 

     ImgArray.forEach(function(link){ 
     img = new Image(); 
     img.src = link; 

     pics.push(img.src); 
    }); 
     return pics; 
}; 

и, например, я хочу сделать одно из этих изображений:

function draw(){ 
ctx.drawImage(loadImage(imgArray)[0]),0,0,100,100); 
}; 

Результат функции draw() - это массив с новыми ссылками на изображение, но я не могу их рисовать из-за того, что, насколько я знаю, они еще не загружены. Пожалуйста, скажите мне, когда я должен это сделать?

Вот ссылка на полный рассказ: http://jsfiddle.net/L23oam57/1/

Answer 1

Recrusive вызов:

var counter = 0; 
var pics = []; 
function loadImage(img){ 


     var img; 


      img = new Image(); 
      img.src = link; 
      img.onload = function(e){draw(img)}; 
      pics.push(img.src); 


    }; 

    function draw(image){ 
    ctx.drawImage(image),0,0,100,100); 
    if(counter != imageArray.length) 
    { 
     loadImage(ImgArray[counter]); 
     counter++; 

    } 
    };