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

Posted 2023-03-04

一、使用时机不同

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

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

二、作用不同

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

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

三、作用不同

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

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

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

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

参考技术A

一、意思不同

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

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

二、作用不同

Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等。

Dom Load是在整个document文档（包括了加载图片等其他信息）加载完成后就可以直接对dom进行操作，比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等。

三、用法不同

用原生的js的时候我们通常用onload时间来做一些事情，比如： 

window.οnlοad=function()

      //do something

或者经常用到的图片，假设这个

document.getElementById("imgID").οnlοad=function()

     //do something

这种就是Dom Load，他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。

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

参考技术B 在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。
这个大家还是亲手试试吧！
=============================
以上来信息源于百度搜索。。。总的来说ready比onload要先触发本回答被提问者和网友采纳