img onload事件綁定

在需要對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屬性即可。

發佈了30 篇原創文章 · 獲贊 8 · 訪問量 30萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章