如何檢查圖像是否使用Javascript加載？

在我的網頁的OnLoad處理程序中，我試圖檢查所有圖像是否已正確加載。如何檢查圖像是否使用Javascript加載？

我遍歷所有<img>標記，並使用我的isImageLoaded()函數檢查它們。不幸的是，我的功能只適用於Firefox和IE版本8.

任何建議如何讓它在IE 9和10的工作？

function isImageLoaded(img) { 
    // check for IE 
    if (!img.complete) { 
     return false; 
    } 
    // check for Firefox 
    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) { 
     return false; 
    } 
    // assume it's ok 
    return true; 
}

更新：原來，罪魁禍首是所有的圖像是由IE9 +加載之前的OnLoad可以發射。什麼會更好地觸發檢查頁面中的圖像？我寧願一次檢查它們，而不是單獨的OnLoad/OnError處理程序。

來源

2013-03-20 Gene Vincent

感謝sdespont！我試圖避免使用庫來保持頁面大小。 – 2013-03-20 08:13:48

您是否嘗試簡單地爲每個圖像添加一個'onload'事件處理程序並計算它們觸發了多少次？ – 2013-03-20 08:14:07

我目前使用頁面OnLoad處理程序。我會認爲那只是調用一次。您認爲在圖像完全加載之前，IE 9 + 10會調用它嗎？ – 2013-03-20 08:15:58

在我的網頁的OnLoad處理程序中，我試圖檢查所有圖像是否都已正確加載。

我假設您使用的是body.onload或<body onload="">？這應該仍然意味着所有圖像都加載—然而，通過使用：

window.addEventListener('load', function(){ 
    /// everything in the page has loaded now 
});

或爲舊版本的IE：

window.attachEvent('onload', function(){ 
    /// everything in the page has loaded now 
});

你會得到不同的瀏覽器更加一致的行爲，和我知道window.onload只會在everthing加載後觸發（包括所有其他資源，如javascript和css）。此鏈接可能是有趣：

window.onload vs <body onload=""/>

所以上面應該讓你的函數一點redundent，除非你是注入圖像到頁面的onload事件已解僱了。但是，如果你想加快速度，而不必等待一切下載，你可以使用DOM準備好聽衆，然後落實kennypu提到的方法：

Cross Browser Dom Ready

只是作爲一個補充說明，據我所知，image.complete應該爲所有現代瀏覽器的工作：

https://developer.mozilla.org/en-US/docs/DOM/HTMLImageElement

來源

2013-03-20 08:31:31 Pebbl

我確實使用window.onload並切換到窗口。addEventListener使事情稍微好一點，但有時仍然失敗。這讓我相信這確實是一個時機，當OnLoad hander被調用，IE 9和10似乎稱它爲時過早時...... – 2013-03-20 08:54:34

@GeneVincent如果你發佈了更多的代碼，StackOverflow社區可以幫助你調試到底是什麼繼續 - 特別是你的'onload'處理程序，但是越多的信息越好。 – Pebbl 2013-03-20 12:25:11

如何檢查圖像是否使用Javascript加載？

回答

相關問題