$(window) . load 和 $(document) . ready 之间的区别是什么？

最近我在使用 JavaScript 代码时遇到了一个问题，我将一部分代码从 $(document).ready()中取出并放入 $(window).load()中就解决了这个问题。

现在我明白了 window.load是在 document.ready之后发射的，但是为什么它在 document.ready之后，也就是在 window.load()之后还没有准备好呢？

62590 次浏览
小开
最佳答案

当所有资产(包括图像)完成加载时，将调用 load。当 DOM 准备好进行交互时，将触发 ready。

来自争取民主变革运动 一个 href = “ https://developer.mozilla.org/en/DOM/window.onload”rel = “ noReferrer”> window.onload :

属性结束时触发加载事件 文件载入程序 中的所有对象 文档位于 DOM 中，所有 图像和子帧已经完成 加载中。

根据 jQuery API 文档，Ref = “ http://api.jquery.com/ready/”rel = “ noReferrer”> . ready (handler) :

而 JavaScript 提供了负载 页时执行代码的事件 则此事件不会得到 触发，直到所有资产，如 图像已经完全收到。 在大多数情况下，可以运行脚本 只要 DOM 层次结构 完全建立。处理程序通过 准备()保证是 在 DOM 准备好之后执行，所以 这通常是最好的地方 附加所有其他事件处理程序和 运行其他 jQuery 代码 依赖于 CSS 值的脚本 样式属性，重要的是 引用外部样式表或 之前嵌入样式元素 引用脚本。

小开

$(document).ready()意味着可以操纵页面的 DOM。

当整个页面(包括 CSS 和图像文件等组件)完全加载完成时，将触发 window.load()。

你想达到什么目的？

小开 
$(document).ready(function(){
//code here
});

当我们使用 jQuery时，几乎每次都会使用上面的代码。

当我们希望在 DOM 准备好之后初始化 jQuery代码时，可以使用此代码。

$(window).load()

有时候你想操纵图片。例如，您想要垂直和水平对齐图片，您需要得到图片的宽度和高度，以便做到这一点。使用 $(document).ready()时，如果访问者没有已经加载的图像，那么您将无法做到这一点，在这种情况下，您需要在图像加载完成时初始化 jquery对齐函数。这就是我们使用 $(window).load()的地方

小开

$(document).ready是在加载 DOM 时触发的 jQuery事件，因此当文档结构准备就绪时触发。

$(window).load事件在整个内容(包括 css、图像等)加载完成后触发。

这是主要的区别。

小开

$(document).ready()在 <body>...</body>中包装 DOM

$(window).load()是在 <html>...</html>中包装所有 DOM 的文档

让我们在您的案例中使用它来保存渲染处理。

小开

Load state 是窗口对象已经创建并且包括 DOM 在内的所有必需组件已经加载到内存中，但尚未传递给呈现引擎以在页面中呈现相同内容时的状态。

另一方面，就绪状态确保将 DOM 元素、事件和其他相关组件传递到呈现引擎，在页面上呈现，并准备好进行交互和操作。

小开

简单来说，在加载窗口的所有内容时调用 window.load，而在加载 DOM 并准备好文档结构时调用 document.ready。

小开

  1. $(document) . ready 是滑块，相对于 $(window) . load 事件。

  2. $(document) . ready is fire when Dom is load but $(window) . load Event 当 Dom、 css 和图像全部加载完毕后开火。 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script  src="https://code.jquery.com/jquery-1.12.4.js" ></script>
<script>
$(window).load(function () {
var img = $('#img1');
alert( "Image Height = " + img.height() + "<br>Image Width = " + img.width());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d" />
</div>
</form>
</body>
</html>

小开

$(document).ready是一个 jQuery 事件。只要加载 DOM 并准备好由脚本操作，它就会触发。这是页面加载过程中脚本可以安全访问页面 html DOM 中的元素的最早阶段。此事件在所有图像、 css 等全部加载之前触发。

当整个页面(包括 CSS 和图像文件等组件)完全加载完成时，将触发 window.load()。


提交答案