深入理解js中的加载事件

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事件

1. 判断css是否加载完毕：

   
   

2. 判断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代码，也可能出自外部的文件

//方法1
window.onerror = function(message,url,line){
 alert(message);
}
//方法2
window.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. $(document).ready(handler) 2.$().ready(handler)
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)