執行onload後加載函數

爲了在頁面加載完成後執行所有命令，我正在維護一個推送所有命令的數組。這是通過以下方式完成的：執行onload後加載函數

<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事件堆疊我應該去加載圖像？

來源

2013-04-22 Namit

處理「負載」關於''標籤的事件是不可靠的。如果您只是等待文檔級別的「加載」事件，則會在所有圖像加載時調用該事件。「準備好」事件發生在*「負載」事件之前。 – Pointy 2013-04-22 16:29:19

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

來源

2013-04-22 16:24:56 flavian

這是對的，但我的HTML調用（例如）'functionTwo（）'幾次，這發生在頁面加載時。我想根據需要多次調用'loadImages（）'，一次'functionTwo（）'。 – Namit 2013-04-22 16:28:24

您可以通過使用ImagesLoaded插件實現：

https://github.com/desandro/imagesloaded

來源

2013-04-22 16:23:02

只是跟蹤getPoster()多少次被調用，一旦調用次數已達到圖像的總數執行每個命令。

來源

2013-04-22 16:23:54

您可以使用此：

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

});

來源

2013-04-22 16:28:58

謝謝，但是'.each（）'方法一旦加載了所有的'.posterImg'就會工作嗎？或者每次加載一個'.posterImg'時它會被執行？ – Namit 2013-04-22 16:33:14

對於每個圖像getPoster（）將被調用 – 2013-04-23 08:27:46

執行onload後加載函數

回答

相關問題