onload() 和 $.ready 的区别？

IT技术 javascript jquery onload
2021-03-05 06:46:05

你能列出使用 jQuery 中onload()和$(document).ready(function(){..})函数之间的区别吗？

6个回答

load一旦加载了页面的所有内容，窗口和/或正文元素上的事件（又名“onload”）将触发——这包括所有图像、脚本等......一切。

相比之下，jquery 的$(document).ready(...)函数将使用特定于浏览器的机制来确保在加载并访问 HTML/XML dom 后尽快调用您的处理程序。这是页面加载过程中的最早点，您可以安全地运行脚本来访问页面的 html dom 中的元素。load由于加载辅助资源（如图像等）需要额外的时间，因此这一点比最终事件更早（通常更早）到达。

如果 Lee 的解释对您来说不够清楚，请查看此定义：codedigest.com/FAQ/...
2021-04-30 06:46:05
有人可以包含一种何时应该使用load以及何时使用的场景document.ready吗？
2021-05-07 06:46:05
@Unbreakable - 如果您的脚本只需要操作元素（将项目动态添加到 div、设置事件侦听器等），您可以在 document.ready 中执行此操作，它会在DOM完全加载后立即运行。如果您想做影响图像的事情（例如，对 .width() 和 .height() 等进行计算）和其他次要资源，您应该使用 window.onload。并注意 Bhanu Prakash Pandey 的回答，您只能有一个 onload（您必须在其中放置您需要完成的所有内容），但您可以在同一页面上进行多个 document.ready 调用。
2021-05-10 06:46:05
@Unbreakable 并且对于未来的观众，如果您正在处理图像或视频的宽度或高度，您需要使用 window.onload 否则它非常简单，只需使用 document.ready。如果您需要更多详细信息，您可以阅读这篇文章：链接
2021-05-10 06:46:05

两者的主要区别是：

  1. Body.Onload() 事件只有在 DOM 和图像等相关资源加载后才会被调用，但 jQuery 的 document.ready() 事件将在 DOM 加载后调用，即它不会等待图像等资源被加载. 因此，一旦加载了 HTML 结构，jQuery 的 ready 事件中的函数就会执行，而无需等待资源。
  2. 我们可以在一个页面中有多个 document.ready() 但 Body.Onload() 事件不能。
有人可以在何时使用 load 以及何时使用 document.ready 中包含一种场景吗？
2021-04-28 06:46:05

Document.ready() 函数在 HTML DOM 加载后立即触发。但是 onload() 函数将在 HTML DOM 之后触发，所有正文内容如图像加载。

body.onload() 关心 HTML 结构和相关资源，而 document.ready() 只关心 HTML 结构。

Onload 负责 DOM 和资源：它检查图像是否已加载、脚本是否已准备好运行等等。

$.ready 只是检查我们是否已经阅读了页面的完整 DOM。

请查看此链接以获取更多解释和示例：http : //dailygit.com/difference-between-document-ready-and-window-load-in-jquery/

其它你可能感兴趣的问题
上一篇如何用纯 JavaScript 制作淡出效果 下一篇DOM 对象的 jQuery xy 文档坐标