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

1. window常见事件onload
2. 2.onload事件
3. img的complete和onload
4. window的onload事件的用法
5. onload事件与ready的区别
6. iframe的onload事件监听
7. JavaScript-onload和onclick事件
8. onload事件追加函数
9. onload事件-----addLoadEvent函数
10. jQuery $(document).ready()和JavaScript onload事件
更多相关文章...
• C# 事件（Event） - C#教程
• jQuery Mobile 事件 - jQuery Mobile 教程
• Composer 安装与使用
• 常用的分布式事务解决方案