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)

温馨提示:内容为网友见解,仅供参考
第1个回答  2019-10-22

一、意思不同

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了。

本回答被网友采纳
第2个回答  推荐于2017-09-01
在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要先触发本回答被提问者和网友采纳

JS 页面加载触发事件 document.ready和onload的区别
一、使用时机不同 1、onload:当用户进入页面时就会触发。2、document.ready:是当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。二、作用不同 1、onload:事件常用来检测访问者的浏览器类型和版本,然后根据这些信息载入特定版本的网页。2、document.ready:是对向window.load事件注册事件的替代方法。

JS 页面加载触发事件 document.ready和onload的区别
2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 (document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法 window.onload没有简化写法 (document).ready(function(){})可以简写成$(function(){});

JS 页面加载触发事件 document.ready和onload的区别
ready是dom树加载完成就可以执行,而onload是所有文件加载完成才执行。ready可以多个书写,而onload只会执行一次。

JS 页面加载触发事件 document.ready和onload的区别
document.ready在文档DOM结构绘制完毕后就执行,不必等到加载完毕 而onload 事件会在页面或图像加载完成后立即发生。

document.ready和onload的区别
document.ready和onload的区别为:加载程度不同、执行次数不同、执行速度不同。一、加载程度不同 1.document.ready:在DOM加载完成后就可以可以对DOM进行操作。一般情况一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息。那么Dom Ready应该在“加载js和css”和“加载图片等其他...

JS 页面加载触发事件 document.ready和onload的区别
和$(document).ready(function(){})这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完)。而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。那么Jquery...

document.ready和onload的区别
window.onload 当一个文件完全下载到浏览器中时,会触发 window.onload 事件。这意味着页面上的全部元素对 javascript 而言都是可以访问的,这种情况对编写功能性的程式码非常有利,因为无需考虑载入的次序。 (document).ready() 通过 $(document).ready() 注册的事件处理程式,则会在 DOM 完全就...

document.ready和onload的区别
页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成。真不知道这个标题该怎么取,暂时就先凑活着用了。用jQ的人很多人都是这么开始写脚本的:(function(){ \/\/ do something });其实这个就是jq ...

JS 页面加载触发事件 document.ready和onload的区别
你说的应该是jQuery的 ( document ).ready()方法吧?当DOM树加载完成时,document会触发一个事件:DOMContentLoaded。此时并未渲染完成。文档还需继续载入可视区域的图片,ActiveX控件等。当这些DOM树之外的东西全部加载完成后,才会触发load事件,此时如果注册了处理器(如指定onload方法),才进行调用。

document.ready事件和document.load事件的区别
1、概念 document.ready:是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件);document.load:是onload,指示页面包含图片等文件在内的所有元素都加载完成。2、作用 document.ready:在DOM加载完成后就可以可以对DOM进行操作。一般情况一个页面响应加载的顺序是,域名解析-加载html-加载js和css...

相似回答