window onload 与 img onload事件

window onload 与 img onload事件

通常,window.onload就是加载完dom之后执行的。而img就是加载完图片完执行它的onload事件,根据img的src是否加载完成。


因此,看下面代码:

<!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.


ps:img的onload事件也可灵活应用,像一些特殊业务需求的,无法追加window.onload事件等,而考虑采用img的onload事件,如加载一张小图片,做隐藏处理,里面调用onload事件。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值