微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

深入理解js中的加载事件

前面的话

提到加载事件,可能想到了window.onload,但实际上,加载事件是一大类事件,本文将详细介绍加载事件

load

load事件是最常用的一个事件,当页面完全加载后(包括所有图像、javascript文件、CSS文件等外部资源),就会触发window上的load事件

[注意]

IE8-浏览器不会为该事件设置srcElement属性,而其他浏览器的target属性指向document

rush:js;"> window.onload = function(e){ e = e || event; var target = e.target || e.srcElement; //IE8-浏览器返回null,其他浏览器返回document console.log(target); }

load事件不仅发生在document对象,还发生在各种外部资源上面。浏览网页就是一个加载各种资源的过程,图像(image)、样式表(style sheet)、脚本(script)、视频(video)、音频(audio)、Ajax请求(XMLHttpRequest)等等。这些资源和document对象、window对象、XMLHttpRequestUpload对象,都会触发load事件

[注意]

如果页面从浏览器缓存加载,并不会触发load事件

图像和框架iframe也可以触发load事件

[注意]

要在指定图像的src属性之前先指定事件,图像是从设置src属性之后开始下载

rush:js;"> var img = new Image(); img.onload = function(){ document.body.appendChild(img); } img.src="http://sandBox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg";
rush:xhtml;">