浏览器加载页面的顺序:

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()加强版

/*
* 传递函数给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);

更多专业前端知识,请上 【猿2048】www.mk2048.com

JS原生方法实现jQuery的ready()相关推荐

  1. 用 JS 原生方法实现 jQuery 的 append, prepend, before, after

    相当于 $(el).before('html' | element) el.insertAdjacentHTML('beforeBegin', 'html'); el.insertAdjacentEl ...

  2. JS原生Ajax和jQuery的Ajax与代码示例

    JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式 掌握json数据格式方式 掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...

  3. js 原生方法 -- 模拟浏览器的 点击事件

    js 原生方法 – 模拟浏览器的 点击事件 1. 创建自定事件并监听 可看看 MDN 的 Evnet, CustomEvent 对象 <!DOCTYPE html> <html la ...

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

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

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

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

  6. jquery $(document).ready()与window.onload的区别

    jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...

  7. jQuery学习(四)— jQuery的ready事件和原生JS的load事件的区别

    jQuery学习(四)- jQuery的ready事件和原生JS的load事件的区别 jQuery的ready事件和原生JS的load事件的区别: 页面中可以有多个ready事件,而load事件会出现 ...

  8. 原生javascript取代jquery的一些方法(jQuery-free)

    转自:http://www.qingdou.me/2687.html jQuery是最流行的JavaScript工具库.据统计,目前全世界57.3%的网站使用它.也就是说,10个网站里面,有6个使用j ...

  9. 【JQuery】jQuery(document).ready(function($) { });的几种表示方法及load和ready的区别

    jQuery中处理加载时机的几种方式 第一种: jQuery(document).ready(function() {alert("你好"); }); //或 $(document ...

最新文章

  1. python入门代码示例-Python入门100个实例(14)——换行符和制表符
  2. 汇编: cli, sti
  3. js div asp.net 实现漂浮图片,可以代码控制。
  4. SuperMap.IS.AjaxScript缓冲区分析及专题图制作
  5. 微信小程序视频弹幕效果
  6. 解决方案_环网柜监测解决方案
  7. c语言两数相加vs,两数相加(C语言)
  8. oracle按用户采集信息,oracle 11g 手动收集用户统计信息
  9. WSS3.0开发-过滤列表内容(2)--一个增强的列表元数据查询webpart(SmartQueryWebPart)...
  10. 深入浅出Word2Vec原理解析
  11. 本地项目上传到码云gitee
  12. 集成googlepay,出现Service not registered
  13. Java--Files
  14. 优盘突然显示无法在此计算机,复制文件到U盘时突然无法复制提示磁盘被写保护该如何修复...
  15. 固定资产管理系统 概要说明书说明书
  16. NLP算法之一(朴素贝叶斯理论部分)
  17. 【字节跳动实习面经(测试开发岗 一面)四个字:破涕为笑】
  18. 计算机科学与探索、计算机工程与应用投稿经验分享
  19. 电脑出现An operating system wasn‘t found,please to Ctrl+alt+del如何解决
  20. 算法总结——大整数加法

热门文章

  1. 计算机相关货品类别,工业计算机的种类以及产品供应链
  2. JAVA中的适配器应用_Java适配器模式应用之电源适配器功能详解
  3. mysql sql wait 写法_有关SQL语句写法注意的那些事情(原创整理)
  4. C#枚举(Enum)小结
  5. 用原生JS读写CSS样式的方法总结
  6. UITextField实现左侧空出一定的边距
  7. matlab impyramid图像金字塔
  8. 如何在vs2010中修改栈的大小
  9. SAS宏技术中,%let和call symput有什么区别?
  10. oracle 强制 断开,ORA-01092: ORACLE 例程终止 强行断开连接