页面加载、onload和$(document).ready()之间的区别

11

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

我已经找到答案,但对我来说并不是很清楚。答案是:

ready事件在HTML文档加载后发生,而onload事件发生在稍后,即所有内容(例如图片)也已加载。

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

他的意思是ready事件在HTML文档加载后发生,而onload事件在所有页面元素(例如图像)加载后发生。

那么HTML文档加载是什么?我知道HTML文档加载表示所有页面元素加载完成。

dom准备好或加载完毕是什么意思?HTML文档加载和dom加载有什么区别?请举例说明。

谢谢

2个回答

16

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

window.onload会在页面中所有内容都加载完成后触发。这意味着不仅整个DOM已经加载完毕,还包括任何链接的资源,如图片也已经完全加载。因为它要等待图像加载完成,所以有时会需要很长时间才会触发window.onload。除非您真的需要等到图像加载完成,否则通常不希望等待这么长时间才开始运行修改页面或挂接事件处理程序等JavaScript代码。

$(document).ready()是一个特定于jQuery的事件,它会在DOM准备好进行操作时立即触发,但可能会在图像加载完成之前。这是在浏览器解析并初始化页面HTML中存在的所有对象以及加载页面中的所有脚本之后发生的。在此事件发生时,可以安全地在所有浏览器中修改DOM。在某些浏览器中,检测DOM何时安全加载的机制可能稍微早一些或晚一些。

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

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


pageLoad,AFAIK是ASP的快捷方式,类似于$(document).ready的行为,但并不完全相同...然而,由于某种原因,它依赖于setTimeout - 这应该使其相当不可靠,我认为。 - ZenMaster
什么是回退机制?它是什么意思。另一个问题是什么是DOM,DOM准备好后我们可以做什么?请解释。 - Keith Costa
1
DOM代表文档对象模型。它指的是网页中的对象。如果您想在页面首次加载时执行某些操作,例如连接事件处理程序、创建一些动态内容、调整大小、更改布局以适应屏幕等,则必须等待对象完成加载才能修改它们或添加到它们中。 - jfriend00

0

让我们打个比方,将加载网页的过程与一位拥有食谱的厨师进行比较:

首先,这位厨师(浏览器)会阅读整个食谱(下载HTML文档),确保他理解步骤(HTML代码),并知道需要哪些材料(图片)、器具(样式表)和设备(外部脚本)放在他的厨房里(浏览器缓存)。

随着厨师继续阅读,他会派助手去储藏室取材料、器具和设备(从服务器下载其他文件)。当他阅读完食谱($(document).ready())后,他开始按照步骤操作(显示页面),但有时他会在助手返回所需材料之前就完成某个步骤。不过他非常熟练,所以他仍然能够在等待期间完成后面的步骤。(这个比喻在这里有点不太恰当,但基本上是这样的:根据HTML,浏览器尽可能地布局页面;当你看到页面加载后几秒钟后字体或布局发生变化,因为它最终得到了样式表...想象一下这位厨师在已经放进烤箱的蛋糕中加入鸡蛋。)

只有在厨师助理把食谱中所有所需的东西都拿回厨房(浏览器已经加载了所有的内容)之后,厨师才能把完成的餐点放到盘子里并装饰它(运行onload事件代码)。

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

DOM 是文档对象模型(Document Object Model)的缩写,是 JavaScript 的基本组成部分。这意味着所有现代 Web 浏览器都已经知道 onload 的含义。

jQuery 是一种广泛使用的 JavaScript 库。为了让您的脚本正确地使用 $(document).ready(),您需要链接到一个 jQuery 库的副本。如果没有 jQuery,浏览器不知道 $(document).ready() 的含义。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接