Остановить $ .each, загрузить изображение, а затем продолжить цикл

Question

Мне нужно остановить цикл $ .each, загрузить изображение, а затем продолжить цикл. У меня есть холст, где я загружаю изображения объектов. Объекты находятся в массиве в правильном порядке. Теперь, когда я пытаюсь загрузить объекты из массива, возникает проблема: изображения загружаются медленнее или быстрее из-за разных размеров, и они рисуют на холсте, например. в обратном порядке. Надеюсь, вы поймете меня, потому что мой английский не так хорош. Удачи в любом случае :)

$.each(content,function(i){ 
     obj_id[i] = $.inArray(content[i], different_objects) != -1 ? time == "day" ? content[i] + 'd' : content[i] : content[i]; 
     temp[i] = new Image(); 
     temp[i].src = '../data/img/objects/' + obj_id[i] + '.png?' + i; 
     $(temp[i]).on('load', function() { 
      city_cvs.drawImage({ 
       layer: true, 
       source: '../data/img/objects/' + obj_id[i] + '.png?' + i, 
       x: offset + x + content_pause, y: y - temp[i].height, 
       fromCenter: false, 
       opacity: opacity 
      }); 

      offset = offset + temp[i].width + content_pause; 
     }); 
    }); 

Answer 1

Я хотел бы предложить вам начать все изображения загрузка (для максимальной производительности), а затем добавьте некоторую логику, чтобы убедиться, что вы нарисуете их по порядку, когда они прибудут, - рисуя столько последовательных изображений, которые вы еще не нарисовали на каждом событии onload. Вот как это сделать:

var images = []; 
var lastDrawn = -1; 
$.each(content,function(i){ 
    obj_id[i] = $.inArray(content[i], different_objects) != -1 ? time == "day" ? content[i] + 'd' : content[i] : content[i]; 
    var img = new Image(); 
    // put empty image slot in the array 
    images[i] = null; 
    img.onload = function() { 
     // mark this one as loaded now 
     images[i] = this; 
     // now draw all sequential images since lastDrawn that are ready 
     // code will stop drawing when it encounters an image that is not yet ready 
     for (var imageIndex = lastDrawn + 1; imageIndex < images.length; imageindex++) { 
      // if the image in this slot is ready, draw it 
      if (images[imageIndex]) { 
       city_cvs.drawImage({ 
        layer: true, 
        source: images[imageIndex].src, 
        x: offset + x + content_pause, y: y - images[imageIndex].height, 
        fromCenter: false, 
        opacity: opacity 
       }); 
       // update the lastDrawn index 
       lastDrawn = imageIndex; 
      } else { 
       // found an image that is not yet ready so stop drawing for now 
       break; 
      } 
     } 
    } 
    // must set .src property AFTER the onload handler is set (IE will fire onload immediately if the image is cached 
    img.src = '../data/img/objects/' + obj_id[i] + '.png?' + i; 
}); 

Answer 2

Называя вашу функцию рекурсивно после того, как был загружен образ:

(function loopFunction(i){ 

    obj_id[i] = $.inArray(content[i], different_objects) != -1 ? time == "day" ? content[i] + 'd' : content[i] : content[i]; 
    temp[i] = new Image(); 
    temp[i].src = '../data/img/objects/' + obj_id[i] + '.png?' + i; 
    $(temp[i]).on('load', function() { 
     city_cvs.drawImage({ 
      layer: true, 
      source: '../data/img/objects/' + obj_id[i] + '.png?' + i, 
      x: offset + x + content_pause, y: y - temp[i].height, 
      fromCenter: false, 
      opacity: opacity 
     }); 

     offset = offset + temp[i].width + content_pause; 
     if(i<content.length) loopFunction(i++); // Call again 
    }); 

})(0); // <-- i = 0 

Answer 3

попробовать это один:

var counter=0; 
function loading(i){ 
    obj_id[i] = $.inArray(content[i], different_objects) != -1 ? time == "day" ? content[i] + 'd' : content[i] : content[i]; 
    temp[i] = new Image(); 
    temp[i].src = '../data/img/objects/' + obj_id[i] + '.png?' + i; 
    $(temp[i]).on('load', function() { 
     city_cvs.drawImage({ 
      layer: true, 
      source: '../data/img/objects/' + obj_id[i] + '.png?' + i, 
      x: offset + x + content_pause, y: y - temp[i].height, 
      fromCenter: false, 
      opacity: opacity 
     }); 

     offset = offset + temp[i].width + content_pause; 
    }); 
    counter++; 
    if(content[counter].length!=0){ 
     content[counter].load(loading(counter)); 
    } 
}; 
content[0].load(loading(counter));