首页 > 代码库 > JS原生方法实现jQuery的ready()

JS原生方法实现jQuery的ready()

浏览器加载页面的顺序:

1、 解析HTML结构

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

3、 解析并执行脚本代码

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

5、 加载图片等组件

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

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

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

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

 ready()加强版

/** 传递函数给whenReady()* 当文档解析完毕且为操作准备就绪时,函数作为document的方法调用*/var whenReady = (function () { //这个函数返回whenReady()函数    var funcs = []; //当获得事件时,要运行的函数    var ready = false; //当触发事件处理程序时,切换为true    //当文档就绪时,调用事件处理程序    function handler(e) {        if (ready) return; //确保事件处理程序只完整运行一次        //如果发生onreadystatechange事件,但其状态不是complete的话,那么文档尚未准备好        if (e.type === ‘onreadystatechange‘ && document.readyState !== ‘complete‘) {            return;        }        //运行所有注册函数        //注意每次都要计算funcs.length        //以防这些函数的调用可能会导致注册更多的函数        for (var i = 0; i < funcs.length; i++) {            funcs[i].call(document);        }        //事件处理函数完整执行,切换ready状态, 并移除所有函数        ready = true;        funcs = null;    }    //为接收到的任何事件注册处理程序    if (document.addEventListener) {        document.addEventListener(‘DOMContentLoaded‘, handler, false);        document.addEventListener(‘readystatechange‘, handler, false); //IE9+        window.addEventListener(‘load‘, handler, false);    } else if (document.attachEvent) {        document.attachEvent(‘onreadystatechange‘, handler);        window.attachEvent(‘onload‘, handler);    }    //返回whenReady()函数    return function whenReady(fn) {        if (ready) { fn.call(document); }        else { funcs.push(fn); }    }})();//--------------------- test -----function t1() {    console.log(‘t1‘);}function t2() {    console.log(‘t2‘);}// t2-t1-t2whenReady(t1);t2();whenReady(t2);

 

JS原生方法实现jQuery的ready()