浏览器加载页面的顺序:

1、 解析HTML结构

2、 加载外部脚本和样式表文件

3、 解析并执行脚本代码

4、 构造HTML DOM模型==ready()

5、 加载图片等组件

6、 页面加载完毕==onload()

ready事件是在DOM模型构造完毕时触发

load事件是在页面加载完毕后触发

function ready(fn){
if(document.addEventListener) {
document.addEventListener('DOMContentLoaded', function() {
//注销事件, 避免反复触发
document.removeEventListener('DOMContentLoaded',arguments.callee, false);
fn(); //执行函数
}, false);
}else if(document.attachEvent) { //IE
document.attachEvent('onreadystatechange', function() {
if(document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
fn(); //函数执行
}
});
}
};

ready()加强版(自JavaScript权威指南)

/*
* 传递函数给whenReady()
* 当文档解析完毕且为操作准备就绪时,函数作为document的方法调用
*/
var whenReady = (function() { //这个函数返回whenReady()函数
var funcs = []; //当获得事件时,要运行的函数
var ready = false; //当触发事件处理程序时,切换为true //当文档就绪时,调用事件处理程序
function handler(e) {
if(ready) return; //确保事件处理程序只完整运行一次 //如果发生onreadystatechange事件,但其状态不是complete的话,那么文档尚未准备好
if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {
return;
} //运行所有注册函数
//注意每次都要计算funcs.length
//以防这些函数的调用可能会导致注册更多的函数
for(var i=0; i<funcs.length; i++) {
funcs[i].call(document);
}
//事件处理函数完整执行,切换ready状态, 并移除所有函数
ready = true;
funcs = null;
}
//为接收到的任何事件注册处理程序
if(document.addEventListener) {
document.addEventListener('DOMContentLoaded', handler, false);
document.addEventListener('readystatechange', handler, false); //IE9+
window.addEventListener('load', handler, false);
}else if(document.attachEvent) {
document.attachEvent('onreadystatechange', handler);
window.attachEvent('onload', handler);
}
//返回whenReady()函数
return function whenReady(fn) {
if(ready) { fn.call(document); }
else { funcs.push(fn); }
}
})(); //--------------------- test -----
function t1() {
console.log('t1');
}
function t2() {
console.log('t2');
} // t2-t1-t2
whenReady(t1);
t2();
whenReady(t2);

JS原生方法实现jQuery的ready()的更多相关文章

  1. js 原生方法获取所有兄弟节点

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

    (一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...

  3. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  4. jQuery和JS原生方法对比

  5. js原生ajax与jquery的ajax的用法区别

    什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...

  6. js原生方法传参的细节(面试必问)

    废话不说,直接上题. slice(),接收两个参数,第一个为开始index(从0开始),第二个为结束的index(也是从0开始,但是不包括index本身,只到index-1).返回值是截取的数组,原数 ...

  7. JS原生方法实现瀑布流布局

    html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec ...

  8. 像jq那样获取对象的js原生方法

    使用过jq的童鞋非常喜欢jq获取对象的方法,只要$()就可以获取,在此我封装一个js获取对象的方法 [注意]只对chrome,Firefox,opera,Safari,ie8及ie8以上版本有效 fu ...

  9. JS原生方法被覆盖后的恢复办法

    alert 被覆盖 今天装修博客园,调试了下JS代码发现 alert() 方法被官方覆盖了,查看源码得知 alert 的功能被替换成了 console.log. 恢复 var _frame = doc ...

随机推荐

  1. JAVA 锁

    JAVA 锁 锁的概念 Java中的锁是控制资源访问的一种方式.它弥补了synchronized的可操作性不强的不足. Java的锁都实现了Lock接口.Lock结构定义了锁的基本操作. 函数 解释 ...

  2. 【LeetCode 236】Lowest Common Ancestor of a Binary Tree

    Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...

  3. oracle 数据库远程导出

    exp 用户名/密码@IP:端口/数据库名 file=文件路径 full=y; exp scebm1/ebm@10.3.10.16:1521/scebm file=D:scebm20140527.dm ...

  4. bzoj 3594 [Scoi2014]方伯伯的玉米田(DP+二维BIT)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3594 [题意] 给定一个n个数的序列,有K次将一个区间内的数加1的机会,问最长不下降子 ...

  5. 人们对Python在企业级开发中的10大误解

    From : 人们对Python在企业级开发中的10大误解 在PayPal的编程文化中存在着大量的语言多元化.除了长期流行的C++和Java,越来越多的团队选择JavaScript和Scala,Bra ...

  6. [cocos2d-js]chipmunk例子(一)

    initChipmunk:function() { this.space = new cp.Space(); this.setupDebugNode(); //设置空间内刚体间联系的迭代计算器个数和弹 ...

  7. postsharp初体验

    首先,有必要先介绍下,什么叫做AOP(Aspect-Oriented Programming,面向切面编程).下图是百度的词条解释 用图来解释可能更直接了当些: ps:图片来自http://www.c ...

  8. 第二百零八天 how can I 坚持

    今天徐斌生日,生日快乐.买了两个小蛋糕,哈哈 还买了两条熊猫鱼.不知道鱼会不会冻死啊,买了加热器又不想用,看他们造化吧. LOL不错的游戏的. 睡觉,好冷.

  9. C++Bulder DataSnap 内存泄露元凶

    DSServerClass1 DSServerClass1DestroyInstance void __fastcall TServerContainer1::DSServerClass1Destro ...

  10. Django Signals 从实践到源码分析(转)

    原文:http://foofish.net/blog/66/django-signals 当某个事件发生的时候,signal(信号)允许senders(发送者)用来通知receivers(接收者),通 ...