Функция загрузки после загрузки выполняется

Question

Чтобы выполнить все команды после загрузки страницы, я поддерживаю массив, который выталкивает все команды. Это делается через:

<img src='holder.js/200x280/text:name' 
    alt='name' width='200px' 
    onload='getPoster(this, name)'> 

Это итеративный процесс и выполняется в цикле примерно 20 раз.

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

Я думал, что $(document).ready() позволит мне достичь этого, но это не помогает. Однако использование функции setTimeout() позволяет увидеть конечный результат. Но это, очевидно, не очень хорошо.

getPoster функция:

function getPoster(img, title) { 
    commands.push(new titles(img, title)); 
} 

Как вы думаете, я должен идти о загружать изображения, как только все события OnLoad сложены?

Answer 1

JavaScript - это однопоточный синхронный язык. Поэтому в основном инструкции обрабатываются в том порядке, в котором вы их записываете. Запросы Ajax являются асинхронными, но загрузка таких вещей, как изображения, не является.

Итак, скажем, вам нужно вызвать 4 функции onload, а затем вы хотите загрузить свои изображения. Это довольно просто, особенно если у вас есть jQuery. Если вы не выполняете Ajax-запросы или какие-либо другие асинхронные действия, функции будут выполняться синхронно или один за другим.

$(function() {//is equivalent to $(document).ready(function(){ 
    functionOne(); 
    functionTwo(); 
    functionThree(); 
    //etc 
    loadImages(); 

}); 

Чтобы достичь того, чего вы хотите, самый эффективный способ, которым я могу думать обычай event. Используйте что-то вроде:

$('#foo').on('completedEveryThingElse', function(event) { 
    // So bind the event to whatever wrapper and then trigger it when you are done 
    // loading all other stuff. 
    // Now start loading images. 
}); 

// Whenever you are done loading everything else. 
$('#foo').trigger('completedEveryThingElse'); 

Посмотрите HERE, в JQuery API для trigger()

Answer 2

Вы можете достичь с помощью ImagesLoaded плагина:

https://github.com/desandro/imagesloaded

Answer 3

Просто отслеживать, сколько раз getPoster() были вызваны, когда счетчик вызовов достигли общее количество изображений, выполнения каждой команды.

Answer 4

Вы можете использовать это:

<img class="posterImg" src='holder.js/200x280/text:name' alt='name' width='200px'> 

$(document).ready(function() {  
    $(".posterImg").one('load', function() { 
     getPoster(this,$(this).attr('alt')); 
    }).each(function() { 
     if (this.complete) $(this).load(); 
    }); 

});