- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
$(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/
C语言sscanf()函数:从字符串中读取指定格式的数据 头文件: ?
最近,我有一个关于工作预评估的问题,即使查询了每个功能的工作原理,我也不知道如何解决。这是一个伪代码。 下面是一个名为foo()的函数,该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数,
CStr 函数 返回表达式,该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。 说明 通常,可以
CSng 函数 返回表达式,该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。 说明 通常,可
CreateObject 函数 创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
Cos 函数 返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。 说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
CLng 函数 返回表达式,此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。 说明 通常,您可以使
CInt 函数 返回表达式,此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。 说明 通常,可
Chr 函数 返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。 说明 从 0 到 31 的数字表示标准的不可打印的
CDbl 函数 返回表达式,此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。 说明 通常,您可
CDate 函数 返回表达式,此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。 说明 IsDate 函数用于判断 d
CCur 函数 返回表达式,此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。 说明 通常,
CByte 函数 返回表达式,此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。 说明 通常,可以
CBool 函数 返回表达式,此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。 说明 如果 ex
Atn 函数 返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。 说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
Asc 函数 返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符,则将发生运行时错误。
Array 函数 返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表(用逗号分隔)。如果没有指定此参数,则
Abs 函数 返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null,则返回 Null;如果是未初始化变量,则返回 0。
FormatPercent 函数 返回表达式,此表达式已被格式化为尾随有 % 符号的百分比(乘以 100 )。 FormatPercent(expression[,NumDigitsAfterD
FormatNumber 函数 返回表达式,此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc
我是一名优秀的程序员,十分优秀!