先看这两句代码:
window.addEventListener('load',loaded,false);
document.addEventListener('DOMContentLoaded',loaded,false); 总结:
load事件是在页面所有元素都加载完后触发;
DOMContentLoaded,它是指dom tree加载完就触发;防止了页面加载被堵塞。 DOMContentLoaded事件(IE9+以及其他浏览器)
onreadystatechange事件(IE9以下浏览器)

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

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

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方法实现原理的更多相关文章

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

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

  2. jQuery的ready方法实现原理分析

    jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺 ...

  3. Jquery 扩展方法实现原理

    JSONP原理 首先:JSON和JSONP是不一样的概念. JSON是一种数据交换格式,而JSONP是非正式传输协议. 该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回 ...

  4. jquery的ready方法(DOM是否加载完)详解与使用

    jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:

  5. $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件 ...

  6. (转载)jQuery 1.6 源码学习(二)——core.js[2]之extend&ready方法

    上次分析了extend方法的实现,而紧接着extend方法后面调用了jQuery.extend()方法(core.js 359行),今天来看看究竟core.js里为jQuery对象扩展了哪些静态方法. ...

  7. jQuery中的ready方法及实现按需加载css,js

    模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...

  8. jQuery插件实现的方法和原理简单说明

    下文来自 http://www.itzhai.com/jquery-plug-ins-to-achieve-the-methods-and-principles-of-simple-instructi ...

  9. 模拟jQuery中的ready方法及实现按需加载css,js

    一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂:自己结合 ...

随机推荐

  1. 多用StringBuilder,少用字符串拼接

    在C#中,在处理字符串拼接的时候,使用StringBuilder的效率会比硬拼接字符串高很多.到底有多高,如下: static void Main(string[] args) { string st ...

  2. 为 JIRA 6.x 安装中文语言包

    20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送) 国内私募机构九鼎控股打造,九鼎投资是在全国股 ...

  3. spring集成jpa【为什么有 persistant.xml 文件呢?】

    原文地址: http://www.cnblogs.com/javahuang/archive/2012/12/19/2824633.html spring集成JPA的其中一种方式 JPA和hibern ...

  4. 使用 STHTTPRequest 框架解析 Soap1.2 教程

    1.STHTTPRequest框架地址 https://github.com/nst/STHTTPRequest 将 STHTTPRequest .h  STHTTPRequest.m 文件拖入工程中 ...

  5. vi中跳到文件的第一行和最后一行

    以下皆是在非编辑界面(按ESC键)进行,且都可以通过多种方式实现:   一:跳到文件第一行 1:输入:0或:1,然后回车: 2:在键盘按下小写gg:   二:跳到文件最后一行 1:输入:$,然后回车: ...

  6. 使用模拟对象(Mock Object)技术进行测试驱动开发

    敏捷开发 敏捷软件开发又称敏捷开发,是一种从上世纪 90 年代开始引起开发人员注意的新型软件开发方法.和传统瀑布式开发方法对比,敏捷开发强调的是在几周或者几个月很短的时间周期,完成相对较小功能,并交付 ...

  7. sys.stdout.flush()以及subprocess的用处

    sys.stdout.flush()立即把stdout缓存内容输出. subprocess与shell进行交互,执行shell命令等. 执行shell命令集合: subprocess.check_ou ...

  8. go语言之进阶篇定时器停止

    1.定时器停止 示例: package main import ( "fmt" "time" ) func main() { timer := time.New ...

  9. Android实现在线更新的过程案例

    一.更新软件的准备 在线更新软件的话需要我们有签名的应用,我们需要把签过名之后的软件放入到服务器中,我的如下:  其中apk是有签名的更新版本! updateinfo.html代码如下: {" ...

  10. JS弹出层遮罩,隐藏背景页面滚动条细节优化

    做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容. 一.去除滚动条方法给body添加ove ...