码迷,mamicode.com
首页 > Web开发 > 详细

jquery ready方法实现原理 内部原理

时间:2014-07-16 20:16:09      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:blog   java   strong   os   for   io   

今天闲来无事研究研究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)})

 

jquery ready方法实现原理 内部原理,布布扣,bubuko.com

jquery ready方法实现原理 内部原理

标签:blog   java   strong   os   for   io   

原文地址:http://www.cnblogs.com/sntetwt/p/3836940.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!