深入理解js中的加载事件
来源:互联网 发布:按照文件夹恢复数据 编辑:程序博客网 时间:2024/05/20 15:12
load
load事件:当页面完全加载后(包括所有图片、javascript文件、css文件等外部资源),就会触发window上的load事件
window.onload = function(e) { e = e || event; var target = e.target || e.srcElement; console.log(target); }
IE中输出:
chrome中输出:
load事件不仅发生在document对象,还发生在各种外部资源上面。浏览网页就是一个加载各种资源的过程,图片、样式表、脚本、视频、音频、ajax请求等到。这些资源和document对象、window对象、XMLHttpRequestUpload对象,都会触发load事件
如果页面从浏览器缓存加载,并不会触发load事件
图片和框架iframe也可以触发load事件
判断css是否加载完毕:
判断img加载
要在指定图像的src属性之前先指定事件,图像是从设置了src属性之后开始下载
var img = new Image();img.onload = function(){ document.body.appendChild(img)}img.src = './image/mission.jpg'
3 . 判断框架iframe加载
<iframe id="test" src="http://cnblogs.com" frameborder="0"></iframe><script>test.onload = function(){ console.log(666);}</script>
4 . script,与图片不同,只有在设置了script元素的src属性并将该元素添加到文档后,才会开始下载js文件,即指定src属性和指定事件处理程序的先后顺序不重要
error
以load相反,error事件是加载失败时触发,凡是可以触发load事件的元素,都可以触发error事件
任何没有通过try-catch处理的错误都会触发window对象的error事件
error事件可以接收三个参数:错误消息、错误所在的URL和行号。多数情况下,只有错误消息有用,因为URL只是给出了文档的位置,而行号所指的代码行既可能出自嵌入的javascript代码,也可能出自外部的文件
//方法1window.onerror = function(message,url,line){ alert(message);}//方法2window.addEventListener("error",function(message,url,line){ alert(message);});
图像也支持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 = './image/img.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事件在关闭网页或刷新网页时触发。它一般地用来防止用户不小心关闭网页
window.onbeforeunload = function(e){ e = e || event; //IE浏览器显示指定文本,其他浏览器显示默认文本 e.returnValue = '要离开吗?'; }
DOMContentLoaded(jquery的$(document).ready事件)
下面三个写法是等价的:
1.
3. $(handler)
window的onload事件会在页面中的一切资源都加载完毕时触发,但这个过程可能因为要加载的外部资源过多而颇费周折。而DOMContentLoaded事件则在形成完整的DOM树之后就会触发,而不理会图像、javascript文件,css文件或其他资源是否下载完毕,与load事件不同,DOMContentLoaded支持在页面下载的早期添加事件处理程序,即用户可以尽早地与页面进行交互
网页的js脚本是同步执行的,所以定义DOMContentLoaded事件的监听函数,应该放在所有脚本的最前面,否则脚本一旦发生堵塞,将推迟触发DOMContentLoaded事件
要处理该事件,可以为document或window添加响应的事件处理程序,尽管这个事件会冒泡到window,但它的目标实际是document
//IE8不支持window.addEventListener('DOMContentLoaded',function(e){ console.log(1);}
对于不支持该事件的IE8,可以在页面加载期间设置一个时间为0毫秒的超时调用,且必须作为页面的第一个超时调用
`
setTimeout(function(){
console.log(1);
},0)
- 深入理解js中的加载事件
- js的事件深入理解
- 深入理解JS事件委托
- 深入理解JavaScript中的事件
- 深入理解js中的return
- 深入理解C#中的委托和事件
- 深入理解C#中的委托和事件
- 深入理解DOM中的事件对象
- 深入理解Redis 中的事件循环
- 深入理解jQuery中的事件冒泡
- 深入理解js面向对象中的prototype
- 深入理解JS中的变量作用域
- 深入理解js中的闭包
- 深入理解JS中的变量作用域
- 深入理解JS中的变量作用域
- 深入理解JS中的变量作用域
- 深入理解js面向对象中的prototype
- 深入理解JS中的变量作用域
- 如何学习嵌入式软件
- .NET编程(03)Lambda&Linq(to object)
- 如何转载大神的博客
- 信号
- a标签跳转到配置有angular路由的页面,并控制显示view中的内容
- 深入理解js中的加载事件
- 【GDOI2018模拟9.23】博弈
- 深入了解 WPF Dispatcher 的工作原理(Invoke/InvokeAsync 部分)
- google guava使用例子
- SQL执行顺序
- MFC中用CFile读取和写入文件
- 在Linux上(我的服务器是Ubuntu) 用redis-trib.rb搭建redis集群,并在客户端使用spring-data-redis连接(亲测)
- 2017年“华信智原杯”安徽省大学生程序设计大赛C题刷票
- 用phpstrom编辑器编辑linux服务器上的远程项目