document ready（JS 页面加载触发事件 document.ready和onload的区别）

本文目录

• JS 页面加载触发事件 document.ready和onload的区别
• $(document).ready()的区别
• document.ready和onload的区别
• document.ready事件和document.load事件的区别
• 谈谈document.ready和window.onload的区别
• JS 页面加载触发事件 document.ready和onload的区别

JS 页面加载触发事件 document.ready和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(’onreadytstatechange’,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。这个大家还是亲手试试吧！=============================以上来信息源于百度搜索。。。总的来说ready比onload要先触发

$(document).ready()的区别

$(document).ready()是文档加载完后执行；$(function(){})和上面是一样，因为jquery默认的就是ready，所以执行力上一样的；《script》function a(){xxx}a();《/script》用function a(){}这种形式写的函数是全局函数，在任何调用的地方都能访问并且执行到，《body onload="a()"》《/body》是body加载完后在调用a()函数，本质上都没区别，执行力完全一样

document.ready和onload的区别

1.document.ready是jquery提供的，正确的写法如下：$(document).ready(function(){ // ......});因为这么些比较麻烦，所以一般使用简写的方式，如下：$(function(){ // ....});2.关于document.ready与onload的相同点：都是在页面加载完成后执行方法体中的代码；不同点：document.ready可以绑定多个函数，js根据定义的顺序，依次执行各个方法体，onload不能定义多个，后面定义的会覆盖前面定义的，所以只会执行最后定义的方法。$(function(){ // 方法体1，页面加在后执行});$(function(){ // 方法体2，方法体1执行后执行});window.onload = function(){ // onload方法1};window.onload = function(){ // onload方法2，页面加载完成后执行，不会执行onload方法1}

document.ready事件和document.load事件的区别

1、概念

document.ready：

是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；

document.load：

是onload，指示页面包含图片等文件在内的所有元素都加载完成。

2、作用

document.ready：

在DOM加载完成后就可以可以对DOM进行操作。

一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。

document.load：

在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。

那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。

3、加载顺序

document.ready：

文档加载的顺序：域名解析--》加载HTML--》加载JavaScript和CSS--》加载图片等非文字媒体文件。

只要《img》标签加载完成，不用等该图片加载完成，就可以设置图片的属性或样式等。

在原生JavaScript中没有Dom ready的直接方法。

document.load：

文档加载的顺序：域名解析--》加载HTML--》加载JavaScript和CSS--》加载图片等非文字媒体文件。

DOM load在加载图片等非文字媒体文件之后，表示在document文档加载完成后才可以对DOM进行操作，document文档包括了加载图片等非文字媒体文件。

例如，需要等该图片加载完成，才可以设置图片的属性或样式等。

在原生JavaScript中使用onload事件。

扩展资料

$(document).ready()和传统的方法《body onload=”load()”》 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载。

而$(document).ready()所要执行的代码是在DOM元素被加载完成的情况下执行，所以，使用document.ready()方法的执行速度比onload()的方法要快。

Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作，jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。

谈谈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,Google if (document.addEventListener) { document.addEventListener(’DOMContentLoaded’, function () { document.removeEventListener(’DOMContentLoaded’, arguments.callee, false); callback(); }, false) } //兼容IE 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。 这个大家还是亲手试试吧！

JS 页面加载触发事件 document.ready和onload的区别

一、使用时机不同

1、onload：当用户进入页面时就会触发。

2、document.ready：是当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

二、作用不同

1、onload：事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。

2、document.ready：是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用所绑定的函数。

三、作用不同

1、onload：常被用来处理用户进入或离开页面时所建立的 cookies。

2、document.ready：是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

参考资料来源：百度百科-Javascript 事件

参考资料来源：百度百科-ready(fn)