【经验总结】跪求指导：如何判断图片是否加载完成

群里某筒子问了下，如何判断一张图片已经完成，把想到的可能的情况整理了下

一、一般情况下

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事件触发，而且处理方法被执行了
}