Question

怎样用原生JS实现jQuery的ready方法

Answer 1

function ready(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();        //函数执行
            }
        });
    }
};

相关知识

浏览器加载页面的顺序：

1. 解析HTML结构

2. 加载外部脚本和样式表文件

3. 解析并执行脚本代码

4. 构造HTML DOM模型==ready()

5. 加载图片等组件

6. 页面加载完毕==onload()

ready事件是在DOM模型构造完毕时触发

load事件是在页面加载完毕后触发

Answer 2

　　Load事件是在页面加载完毕后触发；ready事件是在DOM模型构造完毕，加载外部文件前触发；
　　JQuery的ready事件实际上是对IE的readystatechange事件和DOM的DOMContentLoaded事件进行封装，这两事件都是在DOM树结构下载并解析完毕后触发。