等待動態子圖像完成加載

Question

假設我有這樣的情況：

$(window).load(function() {

    $("body").append("<div id='container'></div>");
    var i=1;
    for ( i=1; i<=10; i++ ) {
            $("#container").append("<img src='img"+i+".jpg'></img>");
    }
});

它將加載 10 張可以是不同大小的隨機圖像（img1.jpg...jp10.jpg）。 現在假設我需要這些圖像的一些屬性。 例如，10 個加載圖像的總高度。 這需要在我們使用.height()之前加載所有圖像。

現在的問題：

我如何才能等到所有圖像都加載完畢后再開始計算？ 或者更一般地說，在執行 function 之前，我如何才能等到某個給定容器中的所有圖像都加載完畢？

使用 1 張圖片，我可以使用.load()並進行回調 function。 但是對於多張圖片，似乎不是很容易。 一種解決方案是向添加到計數器的每個圖像添加.load() ，一旦該計數器達到某個值，然后執行 function。 似乎有點老套（但不是太老套）。 只是想就這件事得到一些意見。

Answer 1

您也可以使用 jQuery 創建這些圖像，並為它們附加一個onload -eventhandler。 你也可以將它與 jQuery 的 Deferred 對象結合起來，將事物鏈接在一起。 這可能看起來像：

$(document).ready(function() {
    $("body").append("<div id='container'></div>");
    var i      = 1,
        images = [ ],
        $img   = null;

    for ( i=1; i<=10; i++ ) {
        $img = $('<img>', {
            load: function() {
                images.push( $.Deferred(function( promise ) {
                    promise.resolve();
                }).promise() );
            }
        }).appendTo( '#container' );

        $img.attr('src', 'img' + i + '.jpg');
    }

    $.when.apply( null, images ).done( function() {
        // all images were loaded here, do whatever you want.
    });
});

在這種情況下， done處理程序只有在所有圖像都可以成功加載時才會觸發。 如果您想知道至少一個圖像是否加載失敗，您還可以綁定一個error事件處理程序並reject()一個 promise。 最后使用.then( success, failure )而不是.done() 。

順便說一句，我想將代碼放入DOMContentLoaded （jQuery 的.ready() ）中更有意義。

Answer 2

由於您正在使用 JS 加載圖像，因此您知道它們何時全部加載的唯一方法是使用加載事件處理程序監視每個圖像。 因此，鑒於此，我想說您的反擊想法聽起來像是 go 的最簡單方法。

如果您在頁面源中加載圖像，則可以使用頁面的 onload 處理程序，因為它會等待所有圖像完成加載。

我能想到的唯一另一個簡單的可能性是通過將圖像作為圖像標簽放在實際頁面中來預加載圖像。 如果您不希望它們顯示在該位置，可以隱藏它們。 然后，它們將在頁面 onload 處理程序執行之前由瀏覽器加載，它們將准備好供您檢查它們的大小，然后是 append 新圖像標簽（在頁面的其他地方使用相同的 URL）。 由於瀏覽器已經加載了它們，新標簽將從緩存中加載，因此沒有真正的速度問題。