zoukankan      html  css  js  c++  java
  • jquery ready方法实现原理 内部原理

    今天闲来无事研究研究jquery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多。

    先普及一下jquery.ready()和window.onload,window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发.

    我的ready方法写了2版,借鉴了不少前辈的代码,先上代码。

    代码2.0问世,代码如下

    var $ = ready = window.ready = function(fn){  
        if(document.addEventListener){//兼容非IE  
            document.addEventListener("DOMContentLoaded",function(){  
                //注销事件,避免反复触发  
                document.removeEventListener("DOMContentLoaded",arguments.callee,false);  
                fn();//调用参数函数  
            },false);  
        }else if(document.attachEvent){//兼容IE  
           IEContentLoaded (window, fn);
        }  
    
        function IEContentLoaded (w, fn) {
            var d = w.document, done = false,
            // only fire once
            init = function () {
                if (!done) {
                    done = true;
                    fn();
                }
            };
            // polling for no errors
            (function () {
                try {
                    // throws errors until after ondocumentready
                    d.documentElement.doScroll('left');
                } catch (e) {
                    setTimeout(arguments.callee, 50);
                    return;
                }
                // no errors, fire
    
                init();
            })();
            // trying to always fire before onload
            d.onreadystatechange = function() {
                if (d.readyState == 'complete') {
                    d.onreadystatechange = null;
                    init();
                }
            };
        }
    }
    ready(function(){alert(1)})
    
  • 相关阅读:
    基于Kalman filter 的北斗卫星三维坐标后数据处理
    原子串口使用0D0A结尾作为结束字符
    GY90614 读取温度,修改辐射率,拟合曲线
    CRH PC11配置
    _I2C_SDA_READ 状态确定为输入
    read_byte
    SDA 右移赋值
    积极心态-刚入职的我们
    mysql基础知识点(复习一)
    java基础知识点(复习一)
  • 原文地址:https://www.cnblogs.com/sntetwt/p/3836940.html
Copyright © 2011-2022 走看看