【經驗總結】跪求指導：如何判斷圖片是否加載完成

群里某筒子問了下，如何判斷一張圖片已經完成，把想到的可能的情況整理了下

一、一般情況下

1）圖片靜態頁面標簽<img />創建

<img src = 'http://www.baidu.com/img/baidu_sylogo1.gif' onload='onloadHandler(this)' />

2）圖片通過腳本動態創建

var img = document.createElement('img');
img.onload = function(){
　　alert('img loaded, img.src = ' + this.src);
};
img.onload = onloadHandler;

二、

假設頁面原本有這么張靜態圖片，但沒有通過行內腳本的綁定onloadHandler，如下代碼所示：（有可能開發GG很痛恨行內腳本）

<img src="http://www.baidu.com/img/baidu_sylogo1.gif" id="pic" />

<!-- 假設此處有很多很多很多的資源要加載 -->

<script>

function $(id) { return document.getElementById(id);}
function onloadHandler(){

　　alert('img loaded, img.src = ' + this.src);

};

var img = $('pic');
img.onload = onloadHandler;
img.src = "http://www.baidu.com/img/baidu_sylogo1.gif";

</script>

會有什么問題呢？有可能這段腳本運行之前，圖片的onload事件已經觸發了，於是，onloadHandler永遠也不會執行 >_<

如何解決？—— img.complete

img.complete：如果圖片之前已經加載完成，則為true，否則為false

<script>

function $(id) { return document.getElementById(id);}
function onloadHandler(){
　　alert('img loaded, img.src = ' + this.src);
};

var img = $('pic');
img.src = "http://www.baidu.com/img/baidu_sylogo1.gif";
if(img.complete){
    onloadHandler.call(img);
}else{
    img.onload =onloadHandler;  //注意這里跟上面的區別，img.src賦值 與 綁定 onload事件的順序相反  

} </script>

 

寫在后面：以上代碼未經各大瀏覽器/版本 嚴格摧殘驗證，以下問題尚待驗證，求不小心踩進來的大大指教！

1）是否所有主流瀏覽器均支持 img.complete（包括不同版本）

2）有沒有可能在第一個分支判斷 if(img.complete) 結束后，但未運行到 img.onload 這塊代碼，img的onload事件已經觸發，導致onloadHandler不會執行

下面這段代碼中間插了個耗時無比的邏輯，延遲onload的綁定，結果：onload處理方法還是執行了

var img = document.createElement('img');
img.src = 'http://im-img.qq.com/inc/images/new_header2/logo.gif';
if(img.complete){
    console.log('a');
    onloadHandler.call(img);
}else{
    var t1 = new Date() - 0;
    var div = document.createElement('div');
    for(var i=0; i<10000; i++){
        div.innerHTML = div.innerHTML + i;
    }
    document.body.appendChild(div);
    var t2 = new Date() - 0;
    console.log(t2 - t1);  //在chrome23.0里，6000++ms
    img.onload = onloadHandler;
    
    img.onload = onloadHandler;  //神奇的事情：onload事件觸發，而且處理方法被執行了
}