原生 JS 实现 JQuery 的 ready 方法

  1. window.onload是指“DOM加载完成 + DOM相关的文件下载完成”,即必须等到页面内包含图片的全部元素载入完成后才干运行。
  2. DOMContentLoaded事件是DOM结构绘制完成后就运行,不必等到页面全部元素载入完成。

编写个数

  1. window.onload不能同时编写多个,如果有多个window.onload方法,仅仅会运行一个。
  2. $(document).ready()能够同时编写多个,而且都能够得到运行。可以简写成$(function(){})。

原生实现方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function (fn) {
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
//注销时间,避免重复触发
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
fn(); //运行函数
}, false);
} else if (document.attachEvent) { //IE浏览器
document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
fn(); //函数运行
}
});
}
}