加載所有圖像後執行代碼

我想在加載所有圖像後進行一些界面修復（需要保存圖像的元素的高度並使用它們來改變其他元素的高度）我將加載事件附加到所有圖像但我的加載功能只執行一次。我儘量只使用jQuery的：加載所有圖像後執行代碼

$(function() { 
    var $img = $('img'); 
    var length = $img.length; 
    var count = 0; 

    function load() { 
     console.log(++count + ' == ' + length); 
     if (count == length) { 
      // all images loaded 
     } 
    } 
    $img.load(load).error(load); 
});

我也嘗試使用的onload和onerror的事件：

$img.each(function() { 
    this.onload = load; 
    this.onerror = load; 
});

但加載頁面時，我有隻有一個日誌：

1 == 33

（我正在使用開發工具和緩存禁用的Xubuntu上的Chromium測試）

我在這裏做了什麼錯？如何在所有圖像加載後執行代碼？

來源

2013-12-12 jcubic

聽起來像是你應該在window的load被處理事件：

$(window).load(function() { 
// Glorious code!! 
}

從文檔：「頁面完全加載時運行一個函數，包括圖形。」

http://api.jquery.com/load-event/

來源

2013-12-12 12:33:14

沒有他不應該因爲一些舊的瀏覽器無法發射已加載圖像的onload事件。但是，如果OP沒有爲每個圖像使用特定的onload事件，這將讓他計算每個圖像的高度，所以這是一個可能的修復 –

對不起，我應該更清楚，是的，你是正確的，這應該取代個人處理者贊成更廣泛的方法。 –

執行功能時，頁面加載完成後

$(window).load

這樣，所有的元素都在的地方，隨時可以「測量」

來源

2013-12-12 12:30:54 TimPalmer

$（窗口）.load（函數（）{}） – TimPalmer

加載所有圖像後執行代碼

回答

相關問題