谈谈document.ready和window.onload的区别

在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})

这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完)。

而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。

那么Jquery里面$(document).ready函数的内部是怎么实现的呢?下面我们就来看看:

我们来为document添加一个ready函数:

document.ready =function(callback) {///兼容FF,Googleif(document.addEventListener) {

document.addEventListener('DOMContentLoaded',function() {

document.removeEventListener('DOMContentLoaded', arguments.callee,false);

callback();

},false)

}//兼容IEelseif(document.attachEvent) {

document.attachEvent('onreadystatechange',function() {if (document.readyState == "complete") {

document.detachEvent("onreadystatechange", arguments.callee);

callback();

}                })            }elseif(document.lastChild ==document.body) {

callback();

}

document.ready这个函数是实现了。我们再来验证一下最上面所说的“ready要比onload先执行”

window.onload =function() {

alert('onload');

};

document.ready(function() {

alert('ready');

});

执行这段代码之后,你会看到浏览器里面会先弹出“ready”,在弹出onload。

推荐阅读更多精彩内容

  • 五十三:请解释 JavaScript 中 this 是如何工作的。1.方法调用模式当一个函数被保存为一个对象的属性...
    Arno_z阅读 432评论 0 2
  • DOMContentLoaded与load的区别 在js中DOMContentLoaded方法是在HTML文档被完...
    传奇狗阅读 1,624评论 2 5
  • 第一部分 准入训练 第1章 进入忍者世界 js开发人员通常使用js库来实现通用和可重用的功能。这些库需要简单易用,...
    如201608阅读 1,194评论 6 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,215评论 0 2
  • 数据结构与算法 栈和队列的区别 网络基础 HTTP 无状态怎么理解 可以从REST的角度来理解这个问题。我们知道R...
    笑极阅读 522评论 1 5