$(document).ready() , $(window).load(function() , <body onload="load()"> , data-ng-init="init()" , $(function(){...});
在 jQuery、Angular 和老式 JavaScript 之间可能还有大约十个其他“加载”函数；我找不到明确的资源来说明这些不同方法实际触发的顺序(跨不同的浏览器可能是另一个考虑因素)。还有多少个？他们叫什么？他们以什么顺序施展魔法？
最佳答案
我可以回答 jQuery。如果您谈论的是文档加载，您可以在两个主要时间点收到通知:
当 DOM 已被解析并且现在可以安全操作时(但页面中的某些资源可能尚未完成加载，例如图像)。
当 HTML 文件中明确声明的所有资源都已加载时(如图像，但不是 iframe)。有多种方法可以为这两个事件注册通知。
对于事件 #2，当 HTML 文件中静态声明的所有资源(脚本、样式表、图像等)完成加载(不包括 iframe 内容)时，同时触发这两个事件。
$(window).load(function()
<body onload="load()">
接下来的两个也是相同的，只是声明同一事件的方式不同，在现代浏览器中，这些事件是由在上述事件之前发生的 DOMContentLoaded 事件触发的，MDN 对此进行了如下描述:
$(document).ready()
$(function(){...});
DOMContentLoaded 由 MDN 描述:
The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).
仅供引用，在不生成 DOMContentLoaded 事件的旧版浏览器中，当 document.readyState === "时，将在 并且在一个非常旧的浏览器中，它可能不会被触发，直到 onreadystatechange 通知上调用这些函数Complete”window.onload 发生。
如果您查看浏览器内部结构，就会发现浏览器保留一个 document.readyState 变量。它的可能值为“loading”、“interactive” 和“complete”。
“loading” 的意思是正在加载页面。
“交互式” 的意思是 HTML 已被解析，但某些子资源(图像除外)仍在加载(可能是样式表或脚本)
“完整”表示文档已完成加载(图像和 iframe 除外)
因此，在 jQuery 中公开这些其他加载事件是可能的。但是(这是一个重要的但是)，在所有浏览器中一致工作的唯一状态是“完整”状态。 “interactive” 可能意味着你拥有一个完全解析的 DOM，即使样式表之类的东西尚未加载，你也可以开始更改 DOM，但事实证明它太正如 jQuery 开发的历史所表明的那样，IE 中存在错误，因此尝试使用它是值得的。
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 - 各种加载函数/方法的执行顺序是什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23982071/