pageLoad,onload& $(文件)。就绪()

时间:2011-11-01 19:14:50

标签: javascript jquery

我需要更详细地了解pageLoad,onload和amp;之间的区别。 $(文件)。就绪()

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

  

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

     

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

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

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

dom准备好或加载意味着什么? HTML文档加载和放大之间有什么区别? dom load? 请通过示例让我理解。 感谢

2 个答案:

答案 0 :(得分:13)

我不知道你的意思是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事件。但是,此事件仅受某些浏览器支持,因此它具有其他浏览器的回退机制。

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

答案 1 :(得分:0)

我们用一个类比来比较一个网页加载到一个厨师的过程:

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

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

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

  

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

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

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