在需要對img進行onload事件綁定的時候，一般大家都會想到用常規的方法進行事件綁定，如下：
復制代碼 代碼如下:
<!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>
此時大家會發現alert(1)並沒有執行，這是什麼原因呢？特別是在ie和ff浏覽器下。
而且在用到jquery插件庫的時候會發現，alert除了在ie和Opera浏覽器不彈出來外，其他浏覽器均彈出來，這是為什麼呢？！
主要是window.onload事件是在頁面dom元素加載完後執行，也就包括了img圖片中src加載完成。那麼img.onload 就不會執行了，
因為其是監聽img的src是否加載完成。
那麼，如何對img圖片進行onload事件綁定呢？具體代碼如下：
復制代碼 代碼如下:
<!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>
這種方法，在各浏覽器下均執行alert(1)。
也就是在頁面dom元素加載完成後，獲得img的dom對象，獲得其src屬性，再將其src設置為‘'空，然後監聽img的onload事件，最後再設置img的src屬性即可。