javascript - 页面 Load 、 onload 和 $(document).ready() 之间的区别

Question

我需要更详细地了解 pageLoad 、 onload 和 $(document).ready() 之间的区别

我找到了答案，但我不是很清楚。 答案就像

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds funcionality to the elements in the page doesn't have to wait for all content to load.

试图说 ready 事件发生在 HTML 文档加载后的人 onload 事件发生在所有页面元素(如图像等)被加载之后。

那么什么是HTML文档加载呢？我知道 HTML 文档加载意味着所有页面元素加载完成。

dom 准备就绪或加载是什么意思？ HTML 文档加载和 dom 加载有什么区别？ 请用例子让我明白。 谢谢

Answer 1

我不知道你所说的 pageLoad 是什么意思，但这里有一些关于 onload 和 $(document).ready() 的信息。

window.onload 当页面中的所有内容都完成加载时触发。这意味着不仅加载了整个 DOM，而且所有链接的资源(如图像)也被完全加载。因为这会等待图像完成加载，所以有时可能需要很长时间才能触发 window.onload。除非您真的需要等到图像加载完成，否则您通常不想等这么久才开始运行修改页面或连接事件处理程序等的 javascript...

$(document).ready() 是一个特定于 jQuery 的事件，它会在 DOM 准备好进行操作时立即触发，但可能会在图像完成加载之前很久触发。这发生在页面 HTML 中存在的所有对象都已被浏览器解析和初始化并且页面中的所有脚本都已加载之后。发生此事件时，在所有浏览器中修改 DOM 都是安全的。在某些浏览器中，这甚至可能发生得更早或更晚，因为检测 DOM 何时安全加载的机制在新旧浏览器之间有所不同。

$(document).ready() 的 jQuery 1.6.x 实现使用多种不同的检测机制来检测 DOM 何时准备就绪。首选方法是在文档对象上触发 DOMContentLoaded 事件时。但是，此事件仅受某些浏览器支持，因此它具有针对其他浏览器的回退机制。

这两个事件每页只会触发一次。