快捷導(dǎo)航

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

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

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

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

復(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'); 
img.onload = function(){ 
alert(1); 
}; 
}; 
</script> 
</head> 
<body> 
<img src='images/06.jpg' id='imgId'/> 
</body> 
</html> 

此時大家會發(fā)現(xiàn)alert(1)并沒有執(zhí)行，這是什么原因呢？特別是在ie和ff瀏覽器下。
而且在用到j(luò)query插件庫的時候會發(fā)現(xiàn)，alert除了在ie和Opera瀏覽器不彈出來外，其他瀏覽器均彈出來，這是為什么呢？！
主要是window.onload事件是在頁面dom元素加載完后執(zhí)行，也就包括了img圖片中src加載完成。那么img.onload 就不會執(zhí)行了，
因為其是監(jiān)聽img的src是否加載完成。
那么，如何對img圖片進行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> 