blocks|key|980856|text|$(document).ready()意味着页面的DOM已经准备好可以操作了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|980857|当整个页面(包括组件，如CSS和图像文件)已完全加载。|980858|你想要达到什么目的？|980859|entityMap^0|0|J|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|P|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|K|$]]

<code>$(document).ready()</code> means that the DOM of your page is ready to be manipulated.

<code>window.load()</code> is triggered when the whole page (incl. components like CSS and image files) has been completely loaded.

What are you trying to achieve?

blocks|key|980939|text|$(document).ready(function(){
//code+here
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|980940|当我们使用jQuery时，几乎每次都会用到上面的代码。|unstyled|offset|length|style|CODE|980941|当我们想要在DOM准备好之后初始化jQuery代码时，将使用此代码。|980942|$(window).load()|980943|有时你想要操纵图片。例如，您希望垂直和水平对齐一张图片，为此需要获取图片的宽度和高度。在$(document).ready()中，如果访问者没有加载图像，那么您将无法做到这一点，在这种情况下，您需要在图像加载完成时初始化jquery对齐函数。这就是我们使用$(window).load()的地方|980944|entityMap^0|0|5|6|0|H|6|0|0|18|J|32|6|3K|G|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@$G|U|H|V|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@$G|X|H|Y|I|J]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$B|C]]|$1|O|3|P|5|F|7|10|8|@$G|11|H|12|I|J]|$G|13|H|14|I|J]|$G|15|H|16|I|J]]|9|@]|A|$]]|$1|Q|3|-4|5|F|7|17|8|@]|9|@]|A|$]]]|R|$]]

<pre><code>$(document).ready(function(){
//code here
});
</code></pre>

The code above is used almost every time when we work with <code>jQuery</code>. 

This code is used when we want to initialize our <code>jQuery</code> codes after the DOM is ready.

<pre><code>$(window).load()
</code></pre>

Sometimes you want to manipulate pictures. For example you want to vertically and horizontally align a picture and you need to get the width and height of the picture in order to do that. With <code>$(document).ready()</code> you won’t be able to do that if the visitor doesn’t have the image already loaded, in which case you need to initialize the <code>jquery</code> alignment function when the image finishes loading. That’s where we use <code>$(window).load()</code>

blocks|key|981382|text|$(document).ready是在加载DOM时触发的jQuery事件，因此它在文档结构就绪时触发。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|981383|$(window).load事件在整个内容(包括css、图片等)之后触发。已加载。|981384|这是主要的区别。|981385|entityMap^0|0|H|S|6|0|0|E|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|K|$]]

<code>$(document).ready</code> is <code>jQuery</code> event that is fired when DOM is loaded, so it’s fired when the document structure is ready.

<code>$(window).load</code> event is fired after whole content (including css, images etc..) is loaded.

This is major difference.

blocks|key|981424|text|在<body>...</body>中包装DOM是$(document).ready()|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|981425|$(window).load()是在<html>...</html>中包装所有DOM文档的父亲|981426|让我们在您的情况下使用来保存渲染处理。|981427|entityMap^0|1|G|O|J|0|0|G|I|G|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|K|$]]

<code>$(document).ready()</code> is wrap DOM in <code>&lt;body&gt;...&lt;/body&gt;</code>

<code>$(window).load()</code> is papa of document wrap all DOM in <code>&lt;html&gt;...&lt;/html&gt;</code>

Let's use in your case to save render processing.

blocks|key|981453|text|加载状态是窗口对象已创建且所有必要组件(包括DOM+)已加载到内存中，但尚未传递到呈现引擎以便在页面中呈现相同内容时的状态。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|981454|另一方面，就绪状态确保DOM元素、事件和其他相关组件被传递到呈现引擎，呈现在页面上，并准备好进行交互和操作。|981455|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Load state is the state when the window object has been created and all necessary components including DOM has been loaded in memory, but has not been passed to the rendering engine for rendering the same in page.

Ready state on the other hand makes it sure that the DOM elements, events and other dependent components are passed on to the rendering engine, rendered on page, and is ready for interaction and manipulation.

blocks|key|766019|text|简而言之，在加载完窗口的所有内容时调用window.load，而在加载DOM并准备好文档结构时调用document.ready。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|766020|entityMap^0|J|B|1D|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

In simple words, <code>window.load</code> is called when all content of window is loaded whereas <code>document.ready</code> is called when DOM is loaded and document structure is ready.

blocks|key|766209|text|$(document).ready是一个jQuery事件。一旦DOM被加载并准备好被脚本操纵，它就会触发。这是页面加载过程中脚本可以安全地访问页面的html+DOM中的元素的最早时间点。此事件在所有图像、css等完全加载之前激发。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|766210|当整个页面(包括组件，如CSS和图像文件)已完全加载。|766211|entityMap^0|0|H|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

<code>$(document).ready</code> is a jQuery event. It fires as soon as the DOM is loaded and ready to be manipulated by script. This is the earliest point in the page load process where the script can safely access elements in the page's html DOM. This event is fired before all the images, css etc. are fully loaded.

<code>window.load()</code> is triggered when the whole page (incl. components like CSS and image files) has been completely loaded.

I have been having a problem lately with my JavaScript CODE and taking a portion of my code out of my <code>$(document).ready()</code> and putting it within <code>$(window).load()</code> fixed the problem. 

Now I understand that <code>window.load</code> is fired just after <code>document.ready</code>, but why is it not ready after <code>document.ready</code>, that is after <code>window.load()</code>?

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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我最近在我的JavaScript代码上遇到了一个问题，从我的$(document).ready()中取出一部分代码并将其放入$(window).load()中解决了这个问题。现在我知道window.load是在document.ready之后启动的，但是为什么在document.ready之后，也就是在window.l...

问$(window).load和$(document).ready有什么区别？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问$(window).load和$(document).ready有什么区别？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问$(window).load和$(document).ready有什么区别？
EN