【问题标题】:difference between pageLoad , onload & $(document).ready()页面 Load , onload 和 $(document).ready() 之间的区别
【发布时间】:2011-11-01 19:14:50
【问题描述】:

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

我找到了答案,但这对我来说不是很清楚。 答案是这样的

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

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

在 HTML 文档被加载后,试图说就绪事件的人发生 和 onload 事件发生在所有页面元素(如图像等)被加载之后。

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

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

【问题讨论】:

    标签: javascript jquery


    【解决方案1】:

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

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

    【讨论】:

    • pageLoad,AFAIK,是类似于$(document).ready 的行为的 ASP 快捷方式,但不一样......然而,出于某种原因,它依赖于setTimeout - 这应该使它非常不可靠, 国际海事组织。
    • 什么是回退机制......这是什么意思。另一个问题是什么是 DOM 以及在 dom 准备好之后我们可以做什么?请解释一下
    • DOM 代表文档对象模型。它的意思是网页中的对象。如果您想在页面首次加载时对其进行处理,例如连接事件处理程序、创建一些动态内容、调整大小、更改布局以适应屏幕等等……那么您必须等待对象在修改或添加之前完成加载。
    【解决方案2】:

    我们打个比方,将网页加载到有菜谱的厨师的过程中进行比较:

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

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

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


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

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-01-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-07-02
      • 1970-01-01
      • 2011-07-08
      相关资源
      最近更新 更多