Javascript pageLoad 、 onload 和 $(document).ready() 之间的区别

difference between pageLoad , onload & $(document).ready()

提问by Keith Costa

i need to know in more detail of what is the differences between pageLoad , onload & $(document).ready()

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

I found answer but that is not ver clear to me. the answer is like

我找到了答案，但这对我来说还不是很清楚。答案就像

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 事件发生在稍后，当所有内容（例如图像）也已加载时。

onload 事件是 DOM 中的标准事件，而 ready 事件是特定于 jQuery 的。ready 事件的目的是它应该在文档加载后尽早发生，以便为页面中的元素添加功能的代码不必等待所有内容加载。

the person trying to say ready event occurs after the HTML document has been loaded and onload event occur after all page element like image etc being loaded.

试图说就绪事件的人在 HTML 文档加载后发生，而 onload 事件在所有页面元素（如图像等）加载后发生。

So what is HTML document load? I know HTML document load means all page element load complete.

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

What does mean like dom is ready or loaded? What is the difference between HTML document load & dom load? Please make me understand with example. Thanks

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

回答by jfriend00

I don't know what you mean by pageLoad, but here's some info on onloadand $(document).ready().

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

window.onloadfires when everything in the page has finished loading. That means that not only the entire DOM is loaded, but any linked resources such as images are fully loaded. Because this waits for images to finish loading, it can sometimes take a long time to fire window.onload. Unless you really need to wait until images are finished loading, you do not generally want to wait this long to start running your javascript that modifies the page or hooks up event handlers, etc...

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

$(document).ready()is a jQuery-specific event that fires as soon as the DOM is ready for manipulation, but potentially long before images have finished loading. This occurs after all objects present in the page HTML have been parsed and initialized by the browser and after all scripts in the page have been loaded. At the moment of this event, it is safe to modify the DOM in all browsers. This even may occur a little earlier or later in some browsers as the mechanism for detecting when the DOM is safely loaded varies between older and newer browsers.

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

The jQuery 1.6.x implementation for $(document).ready()uses a number of different detection mechanisms for when the DOM is ready. The preferred method is when the DOMContentLoadedevent triggers on the document object. But, this event is only supported by some browsers so it has fallback mechanisms for other browsers.

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

Both of these events will fire only once per page.

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

回答by Dan Henderson

Let's draw an analogy to compare the process of loading a web page to a chef with a recipe:

我们来打个比方，比较一下厨师用菜谱加载网页的过程：

First, the chef (browser) reads the entire recipe (downloads the HTML document), to make sure that he understands the steps (HTML code) and that he knows what ingredients (images), utensils (style sheets), and appliances (external scripts) he will need to have in his kitchen (browser cache).

首先，厨师（浏览器）阅读整个食谱（下载 HTML 文档），以确保他理解步骤（HTML 代码），并知道他知道哪些成分（图像）、器具（样式表）和器具（外部脚本）他需要在他的厨房里（浏览器缓存）。

As the chef continues reading, he sends his assistant to the pantry to get the ingredients, utensils, and appliances (download the other files from the server). When he is finished reading the recipe ($(document).ready()), he starts to follow the steps (display the page), but sometimes he gets to a step before his assistant returns with the necessary materials to complete that step. He's pretty skilled, though, so he's still able to complete the later steps while he waits. (The analogy breaks down just a bit here, but basically: the browser lays out the page as well as it can based on the HTML; when you see a page load and then the fonts or layout change after a couple of seconds because it finally got the style sheet... just imagine that this chef is somehow able to add eggs to a cake that's already in the oven.)

当厨师继续阅读时，他会派他的助手到食品储藏室去拿配料、器皿和电器（从服务器下载其他文件）。当他读完食谱 ( $(document).ready()) 后，他开始按照步骤操作（显示页面），但有时他会在助手带着完成该步骤所需的材料返回之前完成一个步骤。不过他的技术相当娴熟，所以他仍然能够在等待的时候完成后面的步骤。（这个类比在这里稍微分解了一点，但基本上：浏览器根据 HTML 尽可能地布置页面；当您看到页面加载时，几秒钟后字体或布局发生变化，因为它最终得到了样式表……想象一下这位厨师能够以某种方式将鸡蛋添加到已经在烤箱中的蛋糕中。）

It's only after the chef's assistant has brought everything identified in the recipe back to the kitchen (the browser has loaded all of the content) that the chef can put the completed meal onto the plate and garnish it (run the onloadevent code).

只有当厨师的助手将菜谱中标识的所有内容带回厨房（浏览器已加载所有内容）后，厨师才能将完成的餐点放在盘子上并进行装饰（运行onload事件代码）。

---

---

The onload event is a standard event in the DOM, while the ready event is specific to jQuery.

onload 事件是 DOM 中的标准事件，而 ready 事件是特定于 jQuery 的。

The DOMis the Document Object Model, a basic component of ordinary JavaScript. This means that all modern web browsers already know what onloadmeans.

DOM是文档对象模型，是普通 JavaScript 的基本组件。这意味着所有现代网络浏览器都已经知道这onload意味着什么。

jQueryis a widely-used JavaScript library. In order for your script to properly use $(document).ready(), you will have to link to a copy of the jQuery library. Browsers don't know what $(document).ready()means without jQuery.

jQuery是一个广泛使用的 JavaScript 库。为了让您的脚本正确使用$(document).ready()，您必须链接到 jQuery 库的副本。浏览器不知道$(document).ready()没有 jQuery 意味着什么。