谈谈document.ready和window.onload怎么用的区别

来源：蜘蛛抓取(WebSpider) 时间：2015-02-07 03:18 标签： 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,Google
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
callback();
else if (document.attachEvent) {
document.attachEvent('onreadytstatechange', function () {
&&&& if (document.readyState == "complete") {&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& document.detachEvent("onreadystatechange", arguments.callee);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& callback();&&&&&&&&&&&&&&&&&&&&&& }
else if (document.lastChild == document.body) {
callback();
document.ready这个函数是实现了。我们再来验证一下最上面所说的&ready要比onload先执行&：
window.onload = function () {
alert('onload');
document.ready(function () {
alert('ready');
执行这段代码之后，你会看到浏览器里面会先弹出&ready&,在弹出onload。
这个大家还是亲手试试吧！
现在ready和onload的区别讲完了，后续会继续更新新东西。
排版好像不是很好，大家有好排版的方法可以说一下。
阅读(...) 评论()jquery中$ready和window.onload的区别_百度知道
jquery中$ready和window.onload的区别
提问者采纳
按执行时机比：window.load---必须等待网页中所有的内容加载完毕后(包括图片)才能执行$(document).ready()--网页中所有DOM结构绘制完毕后就执行，可以能DOM元素关联的内容并没有加载完按编写个数比：window.load：不能同时编写多个，以下代码无法正确执行：window.onload&=&function(){&&&alert(&offcn&);};window.onload&=&function(){&&&alert(&&);};结果只输出第二个$(document).ready()：能同时编写多个以下代码正确执行：$(document).ready(function(){&&&alert(&Hello&offcn&);});$(document).ready(function(){&&&alert(&Hello&&);});结果两次都输出Jquery代码如下：$(window).load(function(){//&编写代码});& &等价于JavaScript中的以下代码&Window.onload&=&function(){//&编写代码}望采纳！ & &
其他类似问题
按默认排序
其他1条回答
ready指dom加载完毕onload指页面加载完毕（包括css，image，js。。。。。）
jquery的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁页面导航：
→ 正文内容 windows.onload()与$(document).ready()的区别
一张表格告诉你windows.onload()与$(document).ready()的区别
这篇文章主要介绍了windows.onload()与$(document).ready()的区别
浏览器加载完DOM后，会通过javascript为DOM元素添加事件，在javascript中，通常使用window.onload()方法。
在jquery中，则使用$(document).ready()方法。下面介绍一下两者的区别。
window.onload()
$(document).ready()
在页面所有元素（包括图片，引用文件）加载完后执行。
页面中所有HTML DOM，CSS DOM结构加载完之后就会执行，其他图片可能没有加载完.
如果想要网页所有内容（包括图片等）加载完毕，再注册事件，使用$(window).load(function);
等价于window.onload()
不能同时写多个，后面的将会覆盖前面的。ex:
window.onload=function(){ alert("A"); }
window.onload=function(){ alert("B"); }
结果会执行“B”
如果想要顺序执行alert("A")和alert("B")需写成
window.onload=function(){
alert("A");
alert("B");
可以同时写多个
$(document).ready(function(){
$().ready(function(){ //$()不带参数默认是document
$(function(){
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910$(document).ready(function(){})表示DOM文档结构加载完成并且jQuery.js也加载完毕之后后执行，不包括图片等非文字媒体资源，$(document).ready(function(){})的缩略写法还有：$(function(){...}) 和&$().ready(function(){...})&window.onload表示页面和包含图片等所有资源加载完成后执行。从这个层次来说&$(document).ready(function(){})要比window.onload好的多，因为一个页面的相应加载顺序是这样的：域名解析-加载html-加载js和css-加载图片等其他信息。注意还有一些特殊情况：因为$(document).ready(function(){...})是在一旦DOM节点加载完后就开始执行，但是如何页面中引用的其他的JS脚本，并且修改了一些DOM节点结构，那么这个时候$(document).ready(function(){..})就有可能无法检测到实际的节点。当然你可以用setTimeout()或者 setInterval解决。
关注微信公众平台

我要回帖

更多关于 window.onload 的文章

 

随机推荐