window onload 與 img onload事件

時間 2019-12-01

原文原文鏈接

window onload 與 img onload事件javascript

一般，window.onload就是載入完dom以後運行的。html

而img就是載入完圖片完運行它的onload事件。依據img的src是否載入完畢。java

所以。看如下代碼：dom

<!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>window onload與img onload</title> 
<script type='text/javascript'> 
window.onload = function(){ 
	var img = document.getElementById('img1'); 
	//var src = img.getAttribute('src'); 
	//img.setAttribute('src','');
	img.onload = function(){
		alert(1); 
	}; 
	//img.setAttribute('src',src);
}; 
</script> 
</head> 
<body> 
<img src='6.png' id='img1'/> 
</body> 
</html>

注：上面的6.png本身找圖片替換上。

上面代碼將不會彈出1。因爲window.onload已經包含圖片的onload了。而圖片的onload是監聽img的src是否載入完畢。去掉凝視就能夠彈出1，不可彈出1的可能你的圖片找不到。scr沒有載入完畢。所以沒有彈出1. ui

ps：img的onload事件也可靈活應用，像一些特殊業務需求的。沒法追加window.onload事件等，而考慮採用img的onload事件，如載入一張小圖片，作隱藏處理。裏面調用onload事件。code