2011-11-01 68 views
8

我需要的是什么页面加载之间的差异更详细地了解,onload事件& $(文件)。就绪()

我找到答案,但这对我来说不是很清楚。 答案是当所有内容(例如图像)也已经被装载的HTML文件已被加载后像

发生ready事件,而onload事件后发生。

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

想说的HTML文档加载 和装载类似图像等所有页面元素后onload事件发生之后发生的事件做好准备的人。

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

dom准备好还是装入了什么意思? HTML文档加载& dom加载有什么区别? 请让我通过例子来理解。 谢谢

回答

11

我不知道你是什么意思的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事件。但是,这个事件只有一些浏览器支持,所以它有其他浏览器的回退机制。

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

+0

pageLoad,AFAIK是类似于$(document).ready'的行为的ASP快捷方式,但不一样...但由于某些原因,它依赖于'setTimeout' - 这会使它非常不可靠,IMO。 – ZenMaster

+0

有些东西真的是错误的评论... – ZenMaster

+0

什么是回退机制....这是什么意思。另一个问题是什么是DOM,以及在DOM准备好后我们可以做些什么? PLzz解释 –

0

让我们打个比喻,比较加载网页与配方厨师的过程:

首先,厨师(浏览器)读取整个配方(下载HTML文件),以确保他了解步骤(HTML代码),并且知道他需要在厨房(浏览器缓存)中使用哪些配料(图像),器皿(样式表)和设备(外部脚本)。

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

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


onload事件是在DOM标准的事件,而准备的事件是具体到jQuery的。

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

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