首页 > 代码库 > window onload 与 img onload事件

window onload 与 img onload事件

2024-07-04 09:57:18   231人阅读

window onl oad 与 img onl oad事件

通常，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 onl oad与img onl oad</title> 
<script type=‘text/javascript‘> 
window.onload = function(){ 
	var img = document.getElementById(‘img1‘); 
	//var src = http://www.mamicode.com/img.getAttribute(‘src‘); >注：上面的6.png自己找图片替换上。
上面代码将不会弹出1，因为window.onload已经包括图片的onload了，而图片的onload是监听img的src是否加载完成。去掉注释即可弹出1，不可弹出1的可能你的图片找不到，scr没有加载完成，因此没有弹出1.

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


联系
我们