图片代码【经验总结】跪求指导：如何判断图片是否加载完成 -java教程

废话就不多说了，开始。。。

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

    一、一般况情下

    1）图片态静页面标签<img />建创

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

2）图片通过本脚动态建创

1 var img = document.createElement('img');
2 img.onload = function(){
3 　　alert('img loaded, img.src = ' + this.src);
4 };
5 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事件触发，而且理处法方被行执了
}

文章结束给大家分享下程序员的一些笑话语录： 腾讯的动作好快，2010年3月5日19时28分58秒，QQ同时在线人数1亿！刚刚看到编辑发布的文章，相差才2分钟，然后连专题页面都做出来了，他们早就预料到了吧？（其实，每人赠送10Q币，轻轻松松上两亿！）