深入理解js中的加载事件


Posted in Javascript onFebruary 08, 2017

前面的话

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

load

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

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

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属性之后开始下载

var img = new Image();
img.onload = function(){
 document.body.appendChild(img);
}
img.src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg";
<iframe id="test" src="http://cnblogs.com" frameborder="0"></iframe>
<script>
test.onload = function(){
 console.log(666);
}
</script>

script元素也可以触发load事件,以便开发人员确定动态加载的javascript文件是否加载完毕。与图像不同,只有在设置了script元素的src属性并将该元素添加到文档后,才会开始下载javascript文件。换句话说,指定src属性和指定事件处理程序的先后顺序不重要

[注意]IE8-浏览器不支持该用法

var script = document.createElement('script');
script.onload = function(){
 console.log(666);
}
document.body.appendChild(script);
script.src=http://files.cnblogs.com/files/xiaohuochai/excanvas.js;

类似地,link元素可以触发load事件,且无兼容性问题。与script类似,在未指定href属性并将link元素添加到文档之前也不会开始下载样式表

类似地,link元素可以触发load事件,且无兼容性问题。与script类似,在未指定href属性并将link元素添加到文档之前也不会开始下载样式表

error

load事件在加载成功时触发,而error事件与之正相反,在加载失败时触发。凡是可以触发load事件的元素,同样可以触发error事件

任何没有通过try-catch处理的错误都会触发window对象的error事件

error事件可以接收三个参数:错误消息、错误所在的URL和行号。多数情况下,只有错误消息有用,因为URL只是给出了文档的位置,而行号所指的代码行既可能出自嵌入的javascript代码,也可能出自外部的文件

要指定onerror事件处理程序,可以使用DOM0级技术,也可以使用DOM2级事件的标准格式

//DOM0级
window.onerror = function(message,url,line){
 alert(message);
}
//DOM2级
window.addEventListener("error",function(message,url,line){
 alert(message);
});

浏览器是否显示标准的错误消息,取决于onerror的返回值。如果返回值为false,则在控制台中显示错误消息;如果返回值为true,则不显示

//控制台显示错误消息
window.onerror = function(message,url,line){
 alert(message);
 return false;
}
a;
//控制台不显示错误消息
window.onerror = function(message,url,line){
 alert(message);
 return true;
}
a;

这个事件处理程序是避免浏览器报告错误的最后一道防线。理想情况下,只要可能就不应该使用它。只要能够适当地使用try-catch语句,就不会有错误交给浏览器,也就不会触发error事件

图像也支持error事件。只要图像的src特性中的URL不能返回可以被识别的图像格式,就会触发error事件。此时的error事件遵循DOM格式,会返回一个以图像为目标的event对象

发生error事件时,图像下载过程已经结束,也就是不能再重新下载了。但是,可以在error事件中,重新设置图像的src属性,指向备用图像的地址

var image = new Image();
document.body.appendChild(image);
image.onerror = function(e){
 image.src = 'smileBackup.gif';
}
image.src = 'smilex.gif';

abort

元素加载中止时,(如加载过程中按下ESC键,停止加载),触发该事件,常用于图片加载

[注意]只有IE浏览器支持

var image = new Image();
image.onabort = function(){
 console.log(111);
}
document.body.appendChild(image);
image.src = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg';

unload

与load事件对应的是unload事件,该事件在文档被完全卸载后触发。一般地,在刷新页面时,会触发该事件

chrome/firefox/safari浏览器会阻止alert等对话框,IE浏览器会阻止console.log()等控制台显示

window.onunload = function(e){
 //chrome报错,firefox静默失败,IE弹出666
 alert(666);
}
window.onunload = function(e){
 //chrome和firefox控制台显示666,IE静默失败
 console.log(666);
}

beforeunload

beforeunload事件在关闭网页或刷新网页时触发。它一般地用来防止用户不小心关闭网页

如果要让beforeunload事件生效,必须满足以下两个条件之一:1、事件处理程序返回一个真值;2、事件对象event.returnValue返回一个真值。如果两个条件同时满足,则以第一个条件为准

chrome/safari/firefox在对话框中不显示指定文本,只显示默认文本。而IE浏览器会在对话框中显示返回值或returnValue值

window.onbeforeunload = function(e){
 e = e || event;
 //IE浏览器显示指定文本,其他浏览器显示默认文本
 e.returnValue = '要离开吗?'; 
}

DOMContentLoaded

window的onload事件会在页面中的一切都加载完毕时触发,但这个过程可能会因为要加载的外部资源过多而颇费周折。而DOMContentLoaded事件则在形成完整的DOM树之后就会触发,而不理会图像、javascript文件、CSS文件或其他资源是否下载完毕。与load事件不同,DOMContentLoaded支持在页面下载的早期添加事件处理程序,这也就意味着用户能够尽早地与页面进行交互

[注意]网页的javascript脚本是同步执行的,所以定义DOMContentLoaded事件的监听函数,应该放在所有脚本的最前面。否则脚本一旦发生堵塞,将推迟触发DOMContentLoaded事件

要处理DOMContentLoaded事件,可以为document或window添加相应的事件处理程序,尽管这个事件会冒泡到window,但它的目标实际上是document

[注意]IE8-浏览器不支持该事件

window.addEventListener('DOMContentLoaded',function(e){
 console.log(1);
})

对于不支持该事件的浏览器如IE8-浏览器,可以在页面加载期间设置一个时间为0毫秒的超时调用,且必须作为页面的第一个超时调用

setTimeout(function(){
 console.log(1); 
},0)

readystatechange

readystatechange事件发生在Document对象和XMLHttpRequest对象,它们的readyState属性发生变化时触发

这个事件的目的是提供与文档或元素的加载状态有关的信息。支持readystatechange事件的每个对象都有一个readyState属性,可能包含下列5个值中的一个

uninitialized(未初始化):对象存在但尚未初始化 
loading(正在加载):对象正在加载数据
loaded(加载完毕):对象加载数据完成
interactive(交互):可以操作对象了,但还没有完全加载
complete(完成):对象已经加载完毕

这些状态看起来很直观,但并非所有对象都会经历readyState的这几个阶段。换句话说,如果某个阶段不适用某个对象,则该对象完全可能跳过该阶段;并没有规定哪个阶段适用于哪个对象。显然,这意味着readystatechange事件经常会少于4次,而readyState属性的值也不总是连续的

对于document而言,值为"interactive"的readyState会在与DOMContentLoaded大致相同的时刻触发readystatechange事件。此时,DOM树已经加载完毕,可以安全地操作它了,因此就会进入交互(interactive)阶段。但与此同时,图像及其他外部文件不一定可用

//'interactive' 'complete'
document.onreadystatechange = function(e){
 if(document.readyState == 'uninitialized'){
  console.log('uninitialized');
 }
 if(document.readyState == 'loading'){
  console.log('loading');
 }
 if(document.readyState == 'loaded'){
  console.log('loaded');
 }
 if(document.readyState == 'interactive'){
  console.log('interactive');
 }
 if(document.readyState == 'complete'){
  console.log('complete');
 } 
}

在与load事件一起使用时,无法预测两个事件触发的先后顺序。在包含较多或较大的外部资源的页面中,会在load事件触发之前先进入交互阶段;而在包含较少或较小的外部资源的页面中,则很难说readystatechange事件会发生在load事件前面

让问题变得更复杂的是,交互阶段可能会早于也可能会晚于完成阶段出现,无法确保顺序。在包含较多外部资源的页面中,交互阶段更有可能早于完成阶段出现;而在页面中包含较少外部资源的情况下,完成阶段先于交互阶段出现的可能性更大。因此,为了尽可能抢到先机,有必要同时检测交互和完成阶段

document.onreadystatechange = function(){
 if(document.readyState == 'interactive' || document.readyState == 'complete'){
  console.log('loaded');
  document.onreadystatechange = null;
 }
}

对于上面的代码来说,当readystatechange事件触发时,会检测document.readyState的值,看当前是否已经进入交互阶段或完成阶段。如果是,则移除相应的事件处理程序以免在其他阶段再执行

另外,IE10-浏览器支持给script元素和link元素触发readystatechange事件,用来确定外部的javascript或css文件是否已经加载完成

var script = document.createElement('script');
script.onreadystatechange = function(){
 if( script.readyState == 'loaded' || script.readyState == 'complete'){
  console.log('loaded');
  script.onreadystatechange = null;
 }
}
script.src="js/digit.js";
document.body.appendChild(script);
var link = document.createElement('link');
link.rel="stylesheet";
link.onreadystatechange = function(){
 if( link.readyState == 'loaded' || link.readyState == 'complete'){
  console.log('loaded');
  link.onreadystatechange = null;
 }
}
link.href="test.css" rel="external nofollow" ;
document.getElementsByTagName('body')[0].appendChild(link);

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
vue下的@change事件的实现
Oct 25 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 #Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 #Javascript
setTimeout学习小结
Feb 08 #Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 #Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 #Javascript
用move.js库实现百叶窗特效
Feb 08 #Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 #Javascript
You might like
用php来检测proxy
2006/10/09 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
python脚本实现验证码识别
2018/06/07 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
2014学雷锋活动总结
2014/03/09 职场文书
中学生家长评语大全
2014/04/16 职场文书
校园广播稿范文
2015/08/19 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python