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

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

我找到了答案,但这对我来说并不清楚。 答案就像

就绪事件发生在加载HTML文档之后,而onload事件发生在稍后,此时所有内容(例如图像)也已加载。

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

尝试说准备事件的人在加载HTML文档之后发生,并且在加载所有页面元素(如图像等)之后发生onload事件。

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

什么意思就像dom准备好或加载? HTML文档加载和dom加载有什么区别? 请让我通过例子了解。 谢谢

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

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

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

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

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

让我们比较一下,比较一个网页加载到配方的厨师的过程:

首先,厨师(浏览器)读取整个食谱(下载HTML文档),以确保他理解步骤(HTML代码),并且他知道什么成分(图像),器具(样式表)和器具(外部)脚本)他需要在他的厨房(浏览器缓存)。

当厨师继续阅读时,他将他的助手送到食品室,以获取食材,器具和器具(从服务器下载其他文件)。 当他完成阅读食谱( $(document).ready() )后,他开始按照步骤(显示页面),但有时他会在他的助手返回之前使用必要的材料完成该步骤。 不过,他非常熟练,所以他仍然可以在等待的时候完成后面的步骤。 (这个比喻在这里分解了一下,但基本上是:浏览器根据HTML布局页面;当你看到页面加载然后字体或布局在几秒后改变,因为它最终得到了样式表…想象一下,这位厨师能以某种方式将鸡蛋添加到已经放入烤箱的蛋糕中。)

只有在厨师的助手将配方中标识的所有东西带回厨房(浏览器已加载所有内容)之后,厨师才能将完成的食物放在盘子上并装饰它(运行onload事件代码)。


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

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

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