img onload事件綁定各瀏覽器均可執(zhí)行
更新時間：2012年12月19日 16:06:04 作者：
在需要對img進行onload事件綁定的時候，一般大家都會想到用常規(guī)的方法進行事件綁定此時大家會發(fā)現(xiàn)alert(1)并沒有執(zhí)行，這是什么原因呢？特別是在ie和ff瀏覽器下這是為什么呢,本文將詳細為您解答
在需要對img進行onload事件綁定的時候，一般大家都會想到用常規(guī)的方法進行事件綁定，如下：
<!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事件綁定呢？具體代碼如下：
<!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>
這種方法，在各瀏覽器下均執(zhí)行alert(1)。
也就是在頁面dom元素加載完成后，獲得img的dom對象，獲得其src屬性，再將其src設(shè)置為‘'空，然后監(jiān)聽img的onload事件，最后再設(shè)置img的src屬性即可。
復(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>
這種方法，在各瀏覽器下均執(zhí)行alert(1)。
也就是在頁面dom元素加載完成后，獲得img的dom對象，獲得其src屬性，再將其src設(shè)置為‘'空，然后監(jiān)聽img的onload事件，最后再設(shè)置img的src屬性即可。
相關(guān)文章
兼容Mozilla必須知道的知識。...2007-01-01
JavaScript數(shù)組的快速克隆(slice()函數(shù))和數(shù)組的排序、亂序和搜索(sort()函數(shù))
JavaScript數(shù)組的快速克隆(slice()函數(shù))和數(shù)組的排序、亂序和搜索(sort()函數(shù))...2006-12-12
這篇文章主要介紹了js筆試題-接收get請求參數(shù)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，,需要的朋友可以參考下
2019-06-06 
javascript彈出窗口 window.open使用方法以及參數(shù)說明分析篇
window.open是網(wǎng)頁中經(jīng)常遇到的彈出窗口代碼，不是網(wǎng)絡(luò)中比較反感的那類彈出代碼。用于新頁面?zhèn)髦?，回傳等?/div> 2009-12-12
這篇文章主要介紹了JavaScript的RequireJS庫入門指南,RequireJS庫的人氣近來攀升很快,需要的朋友可以參考下
2015-07-07 
在JavaScript中使用對數(shù)Math.log()方法的教程
這篇文章主要介紹了在JavaScript中使用對數(shù)Math.log()方法的教程,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
2015-06-06 
用JavaScript腳本實現(xiàn)Web頁面信息交互
這篇文章主要給大家介紹了關(guān)于用JavaScript腳本實現(xiàn)Web頁面信息交互的相關(guān)資料,需要的朋友可以參考下
2006-12-12 
這篇文章主要介紹了JavaScript中var關(guān)鍵字的使用,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
2015-08-08 
javascript與java有什么關(guān)系（區(qū)別與相似）
Java和JavaScript的編程語言，名稱聽起來相似，但卻是兩個公司開發(fā)的不同的產(chǎn)品。Java是SUN公司推出的新一代面向?qū)ο蟮某绦蛟O(shè)計語言，特別適合于Internet應(yīng)用程序開發(fā)；而JavaScript是Netscape公司的產(chǎn)品，可以嵌入Web頁面中的基于對象和事件驅(qū)動的解釋性語言。
2023-02-02