Javascript - загрузка img onload перед загрузкой изображения

Question

Перед тем, как загрузить изображение, моя img.onload срабатывает. Я пытаюсь нарисовать изображения на холсте.

Вот мой код:

var tileAtlas = [ ]; 


function loadAtlasJSON() { 
    for (var i = 0; i < JSONpaths.length; i++) { 
     loadJSON( 
      { 
       fileName: JSONpaths[ i ], 
       success: function(atlas) {    
        console.log(atlas.id); 
        addToTileAtlas(atlas); 
       } 
      } 
     ); 
    } 
}; 


function addToTileAtlas(atlas) { 
    atlas.loaded = false; 
    var img = new Image(); 

    img.onload = function() { 
     // Logs way too soon from the previous console.log 
     console.log(atlas.id); 
     atlas.loaded = true; 
     console.log(atlas.loaded); 
    }; 

    // Always returns false, so onload has not fired yet 
    console.log(atlas.loaded); 
    img.src = atlas.src; 

    // Store the image object as an "object" property 
    atlas.object = img; 
    tileAtlas[ atlas.id ] = atlas; 
} 

После этого кода я использую постоянно проверять каждый Атласа .loaded, пока все не так. Когда все они верны, я рисую изображения на холсте, но ничего не отображается.

Но если я установил тайм-аут (например, 1000 мс), прежде чем рисовать изображения, изображения будут нарисованы в порядке. Это заставляет меня поверить, что .onload стреляет до того, как изображения загружены.

Кроме того, я думаю, что временные метки журнала слишком близки друг к другу, чтобы учесть время загрузки каждого изображения, которое составляет 20-90 кб.

[16:12:06.209] "ground" 
[16:12:06.210] false 
[16:12:06.211] "ground-collision" 
[16:12:06.211] false 
[16:12:06.213] "objects-collision" 
[16:12:06.213] false 
[16:12:06.223] "ground" 
[16:12:06.223] true 
[16:12:06.224] "ground-collision" 
[16:12:06.224] true 
[16:12:06.225] "objects-collision" 
[16:12:06.225] true 

Я знаю, что функция, назначенная на OnLoad не вызывается немедленно, так как console.log(atlas.loaded); под присвоение img.onload еще возвращает ложь.

Я проверил это в нескольких браузерах, которые, как я знаю, не хранят кеш изображения. В моем основном браузере, Firefox, я установил network.http.use-cache и browser.cache.offline.enable в false.

Я тестирую этот код на сервере apache localhost с использованием MAMP, но я не знаю, является ли это актуальным.

Поскольку я знаю, что с использованием тайм-аута, чтобы задержать отображение изображений, это также означает правильность путей загрузки JSON и img.src.

Поскольку img.onload пожары слишком рано, я могу думать только пару причин:

1. Браузер имеет кэшированные изображения и, таким образом, видит его как заряженное. Но тогда это не объясняет, почему он не отображает изображение даже при обновлении.
2. Синтаксис/использование моей .onload неверно.

Благодарим за помощь!

Answer 1

Хорошо, нашел проблему. Это была ошибка из-за асинхронной загрузки моего массива tileAtlus. Я был в цикле над массивом, который все еще не определен. Необходимо переоценить мой подход. Благодаря!