【问题标题】:What is the order in which various load functions/methods execute [duplicate]各种加载功能/方法的执行顺序是什么[重复]
【发布时间】:2014-06-01 16:38:57
【问题描述】:

$(document).ready()$(window).load(function()<body onload="load()">data-ng-init="init()"$(function(){...});

在 jQuery、Angular 和老式 JavaScript 之间可能还有大约十个其他“加载”函数;我找不到明确的资源来说明这些不同方法实际触发的顺序(跨不同的浏览器可能是另一个考虑因素)。还有多少?他们叫什么?他们按什么顺序施展魔法?

【问题讨论】:

  • @Anonymous 因为这些是单独的问题,这不是我要找的。我希望将所有内容都拼写在一个地方。 jQuery、Angular 和原版 JS。
  • 没错,这不是一个资源,但您可以很好地了解每个资源的作用以及它们完成的相对时间。
  • @Anonymous 一个“非常好的主意”不是我想要的。请不要关闭。
  • 不过,在搜索引擎中输入您提到的两个函数的任意组合都会显示有关这两者之间区别的特定 Stack Overflow 问题。然后,从整体来看,顺序变得很明显。

标签: javascript jquery angularjs cross-browser


【解决方案1】:

我可以回答 jQuery。如果您谈论的是文档加载,您可以在两个主要时间点收到通知:

  1. 当 DOM 已被解析并且现在可以安全操作时(但页面中的某些资源可能尚未完成加载,例如图像)。

  2. 当 HTML 文件中明确声明的所有资源都已加载时(如图像,但不是 iframe)。有多种方法可以为这两个事件中的每一个注册通知。


对于事件 #2,这两个事件在 HTML 文件中静态声明的所有资源(脚本、样式表、图像等)完成加载(不包括 iframe 内容)时同时触发。

$(window).load(function()
<body onload="load()">

接下来的两个也是相同的,但只是声明同一事件的不同方式,在现代浏览器中,这些是由 DOMContentLoaded 事件触发的,该事件发生在上述事件之前,MDN 描述如下:

$(document).ready()
$(function(){...});

DOMContentLoaded 由 MDN 描述:

DOMContentLoaded 事件在文档被加载时触发 完全加载和解析,无需等待样式表、图像、 和子帧完成加载(加载事件可用于检测 一个完全加载的页面)。

仅供参考,在不生成DOMContentLoaded 事件的旧浏览器中,当document.readyState === "complete" 时,这些函数将在onreadystatechange 通知上被调用,而在一个非常旧的浏览器中,它可能在window.onload 发生之前不会被触发.


如果您查看浏览器内部结构,浏览器会保留一个 document.readyState 变量。它的可能值为"loading""interactive""complete"

"loading" 的意思是它正在加载页面。

"interactive" 的意思是 HTML 已经被解析,但是一些子资源(除了图片)仍在加载中(可能是样式表或脚本)

"complete" 表示文档已加载完毕(图片和 iframe 除外)

因此,可以在 jQuery 中公开这些其他加载事件。但是(这是个大问题),唯一能在所有浏览器中一致工作的状态是"complete" 状态。 "interactive" 可能意味着您拥有一个完全解析的 DOM,即使尚未加载样式表之类的东西,您也可以开始更改 DOM,但事实证明它在 IE 中太容易出错了甚至值得尝试将其用作 jQuery 开发历史的展示。


jQuery 还有另一种风格的.load(),它使用 ajax 将新内容加载到与初始页面加载无关的给定 DOM 对象中:

$("#content").load("some url", completionFn);

这由你调用并立即触发一个 ajax 函数来检索你给它的 URL 返回的任何内容。然后该内容将被插入到 jQuery 对象中的 DOM 元素中,当该操作完成时,将调用 completionFn


而且,.load() 也可用于监控何时加载特定资源。这主要用于图像:

var img = $("<img>");
img.load(function() {
    // called when the image finishes loading
});
img.attr("src", "http://example.com/myimage.jpg");

【讨论】:

  • 我觉得这不是javascript和两个库之间存在的所有加载函数。
  • @thomas:您可能不喜欢,但这并不意味着情况并非如此;) 如果您对具体方法有具体问题,我们可以为您提供帮助。但对于“感觉”,我们真的无能为力。
  • 我觉得这里不应该提到load(url)
  • @FelixKling 这个答案在我发表评论和你发表评论之间大大扩展。也就是说,既然我已经引起了您的注意,您认为这是(不包括角度)负载函数的明确列表吗?
  • @Bergi - OP 显然正在搜索更多的加载事件(不清楚他们到底在寻找什么),所以我添加了它。
【解决方案2】:

你为什么不自己检查一下?


Fiddle


正如您所看到的,一旦您的DOM 准备就绪,$(document).ready() 就会被解雇,所以$(function(){...});。由于$(function(){...}); 是表示$(document).ready() 的另一种方式,它不会等待所有imagesiframesload

此外,$(window).load(function()&lt;body OnLoad='function()'&gt;window.onload = function(){} 也是相同的,当页面上的所有内容(包括 DOMcontent 框架和图像)完全加载时,这些事件就会触发。所以它有点慢。


您可以将内联 OnLoad 用于许多其他元素,例如 imglinkscripts 等。

喜欢:

<img src="myImage.gif" onload="OnLoadImage()" />
<link rel="stylesheet" type="text/css" href="foo.css" onload="StyleSheetLoaded();" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js" Onload="ScriptLoaded();"></script>


onload 受以下 HTML 标记支持:
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

以及以下 Javascript 对象:

image, layer, window


JavaScript 也依赖于浏览器而不是依赖于库所以它对于所有浏览器都是不变的。

抱歉,我不知道 data-ng-init="init()",它是哪个 JavaScript 库?

希望对您有所帮助。干杯:)!

【讨论】:

  • 那个小提琴链接非常大,+1。我不能摆弄它的原因是因为我相信有比我知道的更多的“加载”方法。
  • data-ng-init="init()" 是 AngluarJS。
  • @FelixKling 感谢您花时间阅读所有答案!你能告诉我AngularJS的目的是什么吗?
  • @thomas,告诉我你想知道load事件的功能吗?
  • 我不能,但他们可以:angularjs.org.
猜你喜欢
  • 2015-06-21
  • 2015-09-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多