快捷導(dǎo)航

img onload事件綁定各瀏覽器均可執(zhí)行

更新時(shí)間：2012年12月19日 16:06:04 作者：

在需要對(duì)img進(jìn)行onload事件綁定的時(shí)候，一般大家都會(huì)想到用常規(guī)的方法進(jìn)行事件綁定此時(shí)大家會(huì)發(fā)現(xiàn)alert(1)并沒有執(zhí)行，這是什么原因呢？特別是在ie和ff瀏覽器下這是為什么呢,本文將詳細(xì)為您解答

在需要對(duì)img進(jìn)行onload事件綁定的時(shí)候，一般大家都會(huì)想到用常規(guī)的方法進(jìn)行事件綁定，如下：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>img onload事件綁定（錯(cuò)誤用法）</title> 
<script type='text/javascript'> 
window.onload = function(){ 
var img = document.getElementById('imgId'); 
img.onload = function(){ 
alert(1); 
}; 
}; 
</script> 
</head> 
<body> 
<img src='images/06.jpg' id='imgId'/> 
</body> 
</html> 

此時(shí)大家會(huì)發(fā)現(xiàn)alert(1)并沒有執(zhí)行，這是什么原因呢？特別是在ie和ff瀏覽器下。
而且在用到j(luò)query插件庫的時(shí)候會(huì)發(fā)現(xiàn)，alert除了在ie和Opera瀏覽器不彈出來外，其他瀏覽器均彈出來，這是為什么呢？！
主要是window.onload事件是在頁面dom元素加載完后執(zhí)行，也就包括了img圖片中src加載完成。那么img.onload 就不會(huì)執(zhí)行了，
因?yàn)槠涫潜O(jiān)聽img的src是否加載完成。
那么，如何對(duì)img圖片進(jìn)行onload事件綁定呢？具體代碼如下：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>img onload事件綁定（正確用法）</title> 
<script type='text/javascript'> 
window.onload = function(){ 
var img = document.getElementById('imgId'); 
var src = img.getAttribute('src'); 
img.setAttribute('src',''); 
img.onload = function(){ 
alert(1); 
}; 
img.setAttribute('src',src); 
}; 
</script> 
</head> 
<body> 
<img src='images/06.jpg' id='imgId'/> 
</body> 
</html> 