我在我正在制作的php页面中集成了一个名为chart.js的javascript库,我已经看到在他们的示例中他们使用该函数
而不是使用该函数,并且出现了对该问题命名的疑问:window.onload
$(document).ready()
window.onload 和 $(document).ready() 有什么区别?
我在英语 SO 上发现了一个类似的问题,称为window.onload vs $(document).ready()但我并不完全清楚,因为我的英语不是很好。
如果有人能为我解决这个问题,我将不胜感激。干杯
jQuery 在其英文文档中清楚地解释了这种差异。不幸的是,这个库的西班牙语文档很少:
很明显,每种方法的名称都表明了差异:
document:当只有文档准备好时,我们可以说是 HTML 部分。
window:当整个窗口、文档和其他一切都准备好时。
▸
window.onload()
event
onload
的缩写,load
在文档加载过程结束时触发。也就是说,当所有 DOM 对象(图像、flash、脚本、帧)都完成加载时。一个例外是样式表,它并不总是在此事件触发时加载。▸
$(document).ready()
jQuery
document.ready
在所有 HTML 内容准备就绪时执行,但在图像和其他资源之前执行。在现代浏览器中,它被替换为DOMContentLoaded
.重要的提示:
从 jQuery 3.0 开始,
$(document).ready()
它进入了Deprecated状态,尽管它仍然可以工作,但它将在库的下一个版本(版本 4)中从 jQuery 核心中消失。jQuery 3 更新指南(英文版,希望有一天能有西班牙语版的文档),解释如下:
注意:有一个插件可以将我们的代码从以前的库迁移到 jQuery 3,有关更多信息,我将链接留在这里。
总之
如果我们要使用构成 Web 的元素(div、输入等),我们将使用
$(document).ready()
. 但是,相反,如果我们要使用图像来对齐它们或检查它们的尺寸,我们将不得不使用$(window).load()
.$(window).load()
当我们打算只使用 DOM 元素时 使用它是一个非常普遍的错误,或者$(document).ready()
当我们打算使用在执行所述函数时不会加载的元素时使用它。说明窗口不同元素的图像
测试代码
让我们看看这段代码片段中发生了什么,其中一方面加载了 DOM 元素,另一方面加载了 YouTube iframe。即使它是最小的,您也会在控制台上看到加载时间的差异。
我将使用 jQuery 3 库而
$(function() {...
不是$( document ).ready(function() {
顺便说一句,如果你喜欢弗拉门戈,别忘了听一首这种类型的最美丽的歌曲:)
有两个基本区别:
$(document).ready()
它是 javascript 库 (jQuery) 的一部分,它不是“本机 javascript”,就像事件一样window.onload
onload
当页面完全加载时触发该事件,其中包含所有内容(样式、图像等),而该函数$(document).ready()
在此之前可用,当文档的 DOM 树完成时。无论如何,您添加到问题中的链接很好地解释了它。
窗口#load
一旦 DOM 已加载并且整个文档已完成解析,就会触发此事件。这包括样式表、脚本和所有类型的多媒体文件(图像、视频、嵌入式文档等)。
jQuery#准备好了
这是一个自定义的 jQuery 事件,当整个 DOM 树已经加载并且 DOM 中的所有元素都可用时触发(无论它们引用的资源是否可用)。这个事件与
document#DOMContentLoaded
.文档#DOMContentLoaded
它的作用与
jQuery#ready
. 当 DOM 准备好时(无论引用的资源如何),本机触发此事件。jQuery#ready
对比document#DOMContentLoaded
显然
jquery#ready
它曾经是并且现在是document#DOMContentLoaded
. 请记住,当 JavaScript 还很懒惰时,jQuery 就出现了,没有它今天所具有的使事情变得更容易的功能。根据 jQuery 文档,它说以下内容:
根据 jQuery,它在浏览器解析处理程序
DOMContentLoaded
之前被触发,因此无论如何它都会被执行。另一方面,如果在事件触发后添加处理程序,则它永远不会执行。jQuery#ready
ready
DOMContentLoaded
ready
除了已经存在的答案之外,还应该注意事件
Window#load
和document#DOMContentLoaded
仅执行一次。如果您声明一个以该事件为条件的函数,并且声明在它们触发后发生,则该函数将永远不会执行。另一方面,
jQuery#ready
它将在文档准备好时执行,并且在文档预先准备好时“立即”执行。最后,与 window 和 document 事件不同,
jQuery#ready
它在内部作为一个 promise 起作用(因此它永远不会真正“立即”)。这意味着块内的代码$(document).ready()
始终异步执行,无论它是否在 DOM 已加载时声明。这可以在以下代码段中验证。块
$(document).ready()
中的块$(document).ready()
,即使知道 DOM 已准备好,也不会使用更高一级的命令顺序执行:在实践中,您可以拥有许多块
$(document).ready
而不会相互影响,例如当其中一个抛出错误时。您显然不能对窗口和文档事件执行此操作。前面的答案都很好,只需要一个例子来说明区别。这里有一个小提琴
一旦图像被加载到浏览器的缓存中,加载差异是难以察觉的。可以计算两次加载之间的差异,以了解外部文件的加载时间。