zoukankan      html  css  js  c++  java
  • 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-t2
    whenReady(t1);
    t2();
    whenReady(t2);
    
  • 相关阅读:
    C#调用java类、jar包方法
    利用IKVM在C#中调Java程序
    同样版本的jstl,都是jstl1.2版本,有个有问题,另一个没有问题
    Python安装及开发环境配置
    jQuery EasyUI parser 的使用场景
    关于HttpURLConnection.setFollowRedirects
    HttpUrlConnection 的 setDoOutput 与 setDoInput
    【Mybatis】向MySql数据库插入千万记录 单条插入方式,用时 1h16m30s
    [MyBatis]再次向MySql一张表插入一千万条数据 批量插入 用时5m24s
    [MyBatis]向MySql数据库插入一千万条数据 批量插入用时6分 之前时隐时现的异常不见了
  • 原文地址:https://www.cnblogs.com/sntetwt/p/4076306.html
Copyright © 2011-2022 走看看