`Fiddle`

Question

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

jQuery，Angular和老式JavaScript之间可能还有大约十个“加载”函数;我找不到一个确定的资源，它说明了这些不同的方法实际触发的顺序（跨越不同的浏览器可能是另一个考虑因素）。还有多少人？他们叫什么？他们以什么顺序发挥他们的魔力？

Answer 1

为什么不亲自检查一下？

<小时/>

`Fiddle`

正如您所见DOM已准备好$(document).ready()时，您就会看到$(function(){...});。$(function(){...});由于$(document).ready()是表示images的另一种方式，它不会等待所有iframes和load到$(window).load(function()。

<body OnLoad='function()'>，window.onload = function(){}＆amp; DOM相同，当您的网页上的所有内容完全加载包括OnLoad内容框架和图片时，这些事件都会触发。所以它有点慢。

<小时/> 您可以将内联img用于许多其他元素，例如link，scripts，

<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>

：

image, layer, window

以下Javascript对象：

data-ng-init="init()"

<小时/> JavaScript也是浏览器依赖而不是库依赖所以它对所有浏览器都是不变的。

抱歉，我不知道 {{1}} ，是哪个JavaScript库？

希望它会帮助你。干杯:)！

Answer 2

我可以回答jQuery。如果您正在谈论文档加载，有两个主要时间点可以通知您：

解析DOM后现在可以安全操作（但页面中的某些资源可能尚未像图像一样加载）。
当加载了HTML文件中专门声明的所有资源时（如图像，但不是iframe）。有多种方法可以为这两个事件中的每一个注册通知。

对于事件＃2，当HTML文件中静态声明的所有资源（脚本，样式表，图像等）已完成加载（不包括iframe内容）时，会同时触发这两个事件。 / p>

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

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

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

DOMNtentLoaded由MDN描述：

文档发布时会触发DOMContentLoaded事件完全加载和解析，无需等待样式表，图像，和子帧完成加载（加载事件可用于检测一个完整的页面。）

仅供参考，在未生成DOMContentLoaded事件的较旧浏览器中，onreadystatechange时会在{{1}}通知时调用这些函数，而在旧版浏览器中，可能不会触发直到document.readyState === "complete"发生。

如果您查看浏览器内部，浏览器会保留window.onload变量。它的值可能为document.readyState，"loading"和"interactive"。

"complete"意味着它正在加载页面。

"loading"意味着HTML已被解析，但一些子资源（图像除外）仍在加载（可能是样式表或脚本）

"interactive"表示文档已完成加载（图片和iframe除外）

因此，可以在jQuery中公开这些其他加载事件。但是（这是很大但是），在所有浏览器中一致工作的唯一状态是"complete"状态。 "complete"可能意味着你有一个完全解析的DOM，你可以开始更改DOM，即使像样式表这样的东西还没有加载，但结果却是错误的在IE中，它甚至值得尝试使用它作为jQuery开发的历史。

jQuery还有另一种"interactive"，它使用ajax将新内容加载到给定的DOM对象中，这与初始页面加载无关：

.load()

这是由你调用并立即触发ajax函数来检索你给它返回的URL的任何内容。然后将该内容插入到jQuery对象的DOM元素中，当该操作完成时，将调用$("#content").load("some url", completionFn);。

并且，completionFn也可用于监视何时加载特定资源。这主要用于图像：

.load()

各种加载函数/方法的执行顺序是什么

2 个答案:

`Fiddle`