Answers:
叫做load
。在DOM准备就绪之前就已经出现了问题,实际上是由于load
等待图像的确切原因而创建了DOM ready 。
window.addEventListener('load', function () {
alert("It's loaded!")
})
window.onload
被调用。我对吗?
onload
等待文档中的所有资源。当然,这不包括不是文档本身的动态创建的请求,例如AJAX请求。
addEventListener("load", function(){
... })
而不是覆盖该onload
属性。
通常,您可以使用window.onload
,但是您可能会注意到,window.onload
使用后退/前进历史记录按钮时,最新的浏览器不会启动。
有人建议使用怪异的扭曲方法来解决此问题,但实际上,如果您只是创建一个window.onunload
处理程序(甚至是一个不执行任何操作的处理程序),则在所有浏览器中都将禁用此缓存行为。该MDC记录了这个“功能”相当不错,但由于某些原因仍有人使用setInterval
和其他怪异的黑客。
某些版本的Opera有一个错误,可以通过在页面中的某些位置添加以下内容来解决此错误:
<script>history.navigationMode = 'compatible';</script>
如果您只是想获取每个视图一次的javascript函数(并且不一定在DOM完成加载之后),则可以执行以下操作:
<img src="javascript:location.href='javascript:yourFunction();';">
例如,我使用此技巧将非常大的文件预加载到加载屏幕上的缓存中:
<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">
为了完整起见,您可能还需要将其绑定到DOMContentLoaded,现在已广泛支持它
document.addEventListener("DOMContentLoaded", function(event){
// your code here
});
更多信息:https : //developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded
$.ready
我认为它做出了很大的贡献。顺便说一句。我也会addEventListener
在load
事件中使用-method ,因为它允许您进行多个回调:window.addEventListener("load", function(event){ // your code here });
尝试此操作仅在加载整个页面后运行
通过Javascript
window.onload = function(){
// code goes here
};
通过Jquery
$(window).bind("load", function() {
// code goes here
});
$(window)
让我觉得这将是jquery-对吗?还是我混淆了一些JavaScript语法?(我是JS新手)。
$(document).ready();
在jQuery可用时使用?
试试这个代码
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
}
}
有关更多详细信息,请访问https://developer.mozilla.org/en-US/docs/DOM/document.readyState
"interactive"
未完全加载。 "complete"
已满载
使用该onLoad()
事件的Javascript ,将在执行之前等待页面加载。
<body onload="somecode();" >
如果您使用的是jQuery框架的文档就绪功能,则代码将在DOM加载后以及页面内容加载之前立即加载:
$(document).ready(function() {
// jQuery code goes here
});
您可能要使用window.onload,因为文档表明直到DOM准备就绪并且页面中的所有其他资产(图像等)都已加载后才触发它。
这是使用PrototypeJS的一种方法:
Event.observe(window, 'load', function(event) {
// Do stuff
});
在具有现代javascript(> = 2015)的现代浏览器中,您可以添加type="module"
到脚本标签,并且脚本的所有内容将在整个页面加载后执行。例如:
<script type="module">
alert("runs after") // Whole page loads before this line execute
</script>
<script>
alert("runs before")
</script>
较旧的浏览器也会了解nomodule
属性。像这样:
<script nomodule>
alert("tuns after")
</script>
有关更多信息,您可以访问javascript.info。
onload
用途$(window).load
(jQuery):$(window).load(function() {
//code
});
GlobalEventHandlers mixin 的onload属性是一个事件处理程序,用于处理Window,XMLHttpRequest,元素等的加载事件,该事件在加载资源时触发。
因此,基本上javascript已经在窗口上具有onload方法,该方法将执行完全加载包含图像的页面...
您可以执行以下操作:
var spinner = true;
window.onload = function() {
//whatever you like to do now, for example hide the spinner in this case
spinner = false;
};