使用 jQuery 进行所有 dom 操作的 window.load？ [复制]

Posted 2023-05-07

【中文标题】使用 jQuery 进行所有 dom 操作的 window.load？ [复制]

【英文标题】：window.load for all dom manipulation with jQuery? [duplicate]

【发布时间】：2014-06-24 17:25:13

【问题描述】：

例如，当操作 div 的高度或各种 css 规则时，文档完全加载是一件好事。那么为什么在 dom 中操作对象时不总是使用 (window).load 而不是 (document).ready 呢？

【问题讨论】：

When manipulating things as height of a div for instance, or various css rules, it's a good thing that the document is completely loaded. 不是真的，确实经常你最好使用准备好的文档。但可以肯定的是，这取决于你在寻找什么

【参考方案1】：

这当然取决于您的需求。

假设您的网站有很多图像，但您需要在文档准备好后立即触发某些事件，然后使用 $(window).load(//your events) 将等待所有图像先加载然后触发事件。 在这种情况下，最好使用 $(document).ready(//your events)。

你可以在这里跟进这个问题，

What is the difference between $(window).load and $(document).ready?

【参考方案2】：

因为“文档准备就绪”要早得多。它表示 DOM 已加载并准备好进行操作。

另一方面，“窗口加载”还包括图像、视频和可能的 Flash 元素 - 所有可能需要很长时间才能加载的元素（尤其是 Flash，除非它具有适当的预加载器），并且您会拥有在您的页面执行任何操作之前等待，即使没有理由这样做。

【讨论】：

好点，但是对于改变高度，比如说 div 中的图像取决于它们的高度 window.load 是好的。

并非如此。图片一开始下载就会暴露他们的width和height属性，这（特别是在照片的情况下）可能在window.onload被解雇之前几秒钟。

我现在正在写一个博客，侧边栏需要拉伸到与主博客文章相同的高度。我使用 jQuery 来执行此操作，如果我在 (document).ready 内部执行此操作，我有时会得到正确的结果，而有时会得到完全虚假的结果。如果我在 (window).load 内执行此操作，我总能得到正确的结果。

我明白了。是的，这是有道理的。但是，您是否考虑过使用不同的 CSS 使侧边栏具有相同的高度？仅使用height:100% 可能是可行的，但可能需要使用flex 框。在最坏的情况下，您始终可以使用表格。

没关系，我用 (window).load 工作得很好，谢谢你的帮助 :)

【参考方案3】：

因为你今天能做的，所以你不会等到明天。文档就绪后 Dom 就绪后触发，窗口加载等待所有资源下载。