首页 > 代码库 > jquery ready方法实现原理 内部原理

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

2024-07-11 14:50:19   221人阅读

今天闲来无事研究研究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 onl oad        d.onreadystatechange = function() {            if (d.readyState == ‘complete‘) {                d.onreadystatechange = null;                init();            }        };    }}ready(function(){alert(1)})

 


联系
我们