废话就不多说了,开始。。。
群里某筒子问了下,如何判断一张图片已实现,把想到的可能的况情整理了下
一、一般况情下
1)图片态静页面标签<img />建创
<img src = 'http://www.baidu.com/img/baidu_sylogo1.gif' onload='onloadHandler(this)' />
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>
如何决解?—— 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币,轻轻松松上两亿!)