先看这两句代码:
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. 关于pcie的备忘

    总线驱动:深度优先统计资源,深度滞后分配资源 资源包括Bus id和内存(prefectable和non-prefectable内存) 设备驱动:包括设备驱动层和消息通信 主要是四个部分: (1)中断 ...

  2. JavaScript进阶系列04,函数参数个数不确定情况下的解决方案

    本篇主要体验函数参数个数不确定情况下的一个解决方案.先来看一段使用函数作为参数进行计算的实例. var calculate = function(x, y, fn) { return fn(x, y) ...

  3. FAQ:什么情况下使用 struct ?

    问: 什么情况下使用 struct ? 答: 使用 struct 有几个前提(必须全部满足): 容忍 struct 本身的限制,如:不能继承. 值语义. 足够小(<=16字节). 如果 stru ...

  4. Unity3d-Particle System系统的学习(二)

    这节我们继续上节没讲完的Particle参数. 上节我们讲了Emission发射器参数,我们接着往下讲Shape: 可以看到这个子模块的参数是跟形状有关: 1.Shape:发射形状.粒子被约束在这个形 ...

  5. Java反射-修改String常量

    /* * ReflectString.java * Version 1.0.0 * Created on 2017年12月15日 * Copyright ReYo.Cn */ package reyo ...

  6. maven打包时跳过单元测试

    运行mvn install时跳过Test <project> [...] <build> <plugins> <plugin> <groupId& ...

  7. 实用ExtJS教程100例-008:使用iframe填充ExtJS Window组件

    上面两节中我们分别演示了ExtJS Window的常用功能 和 如何最小化ExtJS Window组件,在这篇内容中我们来演示一下如何使用iframe填充window组件. 思路很简单,首先创建一个w ...

  8. 使用SpringBoot的关于页面跳转的问题

    示例如下: @Controller public class UserController { @Resource UserService userService; @RequestMapping(& ...

  9. 帕累托分布(Pareto distributions)、马太效应

    什么是帕累托分布 帕累托分布是以意大利经济学家维弗雷多·帕雷托命名的. 是从大量真实世界的现象中发现的幂次定律分布.这个分布在经济学以外,也被称为布拉德福分布. 帕累托因对意大利20%的人口拥有80% ...

  10. PHP读写INI文件

    读INI文件 public function readini($name) { if (file_exists(SEM_PATH.'init/'.$name)){ $data = parse_ini_ ...