jquery ready方法实现原理
先看这两句代码:
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方法实现原理的更多相关文章
- jquery ready方法实现原理 内部原理
jquery ready方法实现原理 内部原理 今天闲来无事研究研究jquery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多. 先普及一下 ...
- jQuery的ready方法实现原理分析
jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺 ...
- Jquery 扩展方法实现原理
JSONP原理 首先:JSON和JSONP是不一样的概念. JSON是一种数据交换格式,而JSONP是非正式传输协议. 该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回 ...
- jquery的ready方法(DOM是否加载完)详解与使用
jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:
- $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件 ...
- (转载)jQuery 1.6 源码学习(二)——core.js[2]之extend&ready方法
上次分析了extend方法的实现,而紧接着extend方法后面调用了jQuery.extend()方法(core.js 359行),今天来看看究竟core.js里为jQuery对象扩展了哪些静态方法. ...
- jQuery中的ready方法及实现按需加载css,js
模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...
- jQuery插件实现的方法和原理简单说明
下文来自 http://www.itzhai.com/jquery-plug-ins-to-achieve-the-methods-and-principles-of-simple-instructi ...
- 模拟jQuery中的ready方法及实现按需加载css,js
一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂:自己结合 ...
随机推荐
- 关于pcie的备忘
总线驱动:深度优先统计资源,深度滞后分配资源 资源包括Bus id和内存(prefectable和non-prefectable内存) 设备驱动:包括设备驱动层和消息通信 主要是四个部分: (1)中断 ...
- JavaScript进阶系列04,函数参数个数不确定情况下的解决方案
本篇主要体验函数参数个数不确定情况下的一个解决方案.先来看一段使用函数作为参数进行计算的实例. var calculate = function(x, y, fn) { return fn(x, y) ...
- FAQ:什么情况下使用 struct ?
问: 什么情况下使用 struct ? 答: 使用 struct 有几个前提(必须全部满足): 容忍 struct 本身的限制,如:不能继承. 值语义. 足够小(<=16字节). 如果 stru ...
- Unity3d-Particle System系统的学习(二)
这节我们继续上节没讲完的Particle参数. 上节我们讲了Emission发射器参数,我们接着往下讲Shape: 可以看到这个子模块的参数是跟形状有关: 1.Shape:发射形状.粒子被约束在这个形 ...
- Java反射-修改String常量
/* * ReflectString.java * Version 1.0.0 * Created on 2017年12月15日 * Copyright ReYo.Cn */ package reyo ...
- maven打包时跳过单元测试
运行mvn install时跳过Test <project> [...] <build> <plugins> <plugin> <groupId& ...
- 实用ExtJS教程100例-008:使用iframe填充ExtJS Window组件
上面两节中我们分别演示了ExtJS Window的常用功能 和 如何最小化ExtJS Window组件,在这篇内容中我们来演示一下如何使用iframe填充window组件. 思路很简单,首先创建一个w ...
- 使用SpringBoot的关于页面跳转的问题
示例如下: @Controller public class UserController { @Resource UserService userService; @RequestMapping(& ...
- 帕累托分布(Pareto distributions)、马太效应
什么是帕累托分布 帕累托分布是以意大利经济学家维弗雷多·帕雷托命名的. 是从大量真实世界的现象中发现的幂次定律分布.这个分布在经济学以外,也被称为布拉德福分布. 帕累托因对意大利20%的人口拥有80% ...
- PHP读写INI文件
读INI文件 public function readini($name) { if (file_exists(SEM_PATH.'init/'.$name)){ $data = parse_ini_ ...