先看这两句代码:
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. Unity3D实践系列06,球体撞击物体游戏

    本篇实现一个球体在固定区域移动撞击Cube的游戏. 首先有1个Plane当作地面,1个Sphere当作球体,4个Cube当作墙,12个Cube当作被撞击物体,另外还有球体的撞击计算,在撞击的过程适时显 ...

  2. Panorama和Pivot控件

    Windows Phone提供了Panorama和Pivot这两种控件供用户横向切换导航的方式来显示具有内容比较相关的页面.本文主要对这两个控件进行描述,包括如何使用,以及一些最佳实践. 其中包括如下 ...

  3. Python:日期和时间类型学习

    背景 在非开发环境经常需要做一下日期计算,就准备使用Python,顺便记下来学习的痕迹. 代码 1 # coding = utf-8 2 3 from datetime import * 4 5 ## ...

  4. Java删除List和Set集合中元素

    今天在做项目时,需要删除List和Set中的某些元素,当时使用边遍历,边删除的方法,却报了以下异常: ConcurrentModificationException 为了以后不忘记,使用烂笔头把它记录 ...

  5. 执行tsung时报"Maximum number of concurrent users in a single VM reached

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://ovcer.blog.51cto.com/1145188/1581326 [roo ...

  6. Adapter数据变化改变现有View的实现原理及案例

    首先说说Adapter详细的类的继承关系.例如以下图 Adapte为接口它的实现类的对象作为AdapterView和View的桥梁,Adapter是装载了View(比方ListView和girdVie ...

  7. 开源项目DataTimePicker实现时间和日期的选择

       这个开源项目是模仿Google官方的time选择器做的,是否漂亮.让我爱不释手,真心喜欢.很有幸和大家一起分享下,那么话不多说开始讲解. 开源项目地址:https://github.com/fl ...

  8. [转]PHP 汉字转拼音

    转自: https://git.oschina.net/wapznw/php-pinyin <?php /** * @package default * @copyright php-pinyi ...

  9. Spring Boot工程结构推荐程结构(最佳实践)

    工程结构(最佳实践) Spring Boot框架本身并没有对工程结构有特别的要求,但是按照最佳实践的工程结构可以帮助我们减少可能会遇见的坑,尤其是Spring包扫描机制的存在,如果您使用最佳实践的工程 ...

  10. 【BZOJ】【3697】采药人的路径&【3127】【USACO2013 Open】Yin and Yang

    点分治 Orz hzwer 倒是比较好想到点分治……然而在方案统计这里,我犯了两个错误…… 1.我比较傻逼的想的是:通过儿子来更新父亲,也就是统计以x为根的子树中xxxx的路径有多少条……这样转移. ...