我正在使用以下代码在页面加载后执行一些语句。
<script type="text/javascript">
window.onload = function () {
newInvite();
document.ag.src="b.jpg";
}
</script>
但是这段代码不能正常工作。即使正在加载某些图像或元素,也会调用该函数。我想要的是调用页面完全加载的函数。
我正在使用以下代码在页面加载后执行一些语句。
<script type="text/javascript">
window.onload = function () {
newInvite();
document.ag.src="b.jpg";
}
</script>
但是这段代码不能正常工作。即使正在加载某些图像或元素,也会调用该函数。我想要的是调用页面完全加载的函数。
这可能对你有用:
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
或者如果您对 jquery 感到满意,
$(document).ready(function(){
// your code
});
$(document).ready()
在 DOMContentLoaded 上触发,但此事件在浏览器中并未一致触发。这就是为什么 jQuery 很可能会实施一些繁重的解决方法来支持所有浏览器。这将使使用普通 Javascript 来“准确地”模拟行为变得非常困难(但当然并非不可能)。
正如 Jeffrey Sweeney 和 J Torres 所建议的那样,我认为setTimeout
在触发如下功能之前最好有一个功能:
setTimeout(function(){
//your code here
}, 3000);
document.addEventListener('readystatechange', event => {
// When HTML/DOM elements are ready:
if (event.target.readyState === "interactive") { //does same as: ..addEventListener("DOMContentLoaded"..
alert("hi 1");
}
// When window loaded ( external resources are loaded too- `css`,`src`, etc...)
if (event.target.readyState === "complete") {
alert("hi 2");
}
});
$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});
注意: - 不要使用以下标记(因为它会覆盖其他同类声明):
document.onreadystatechange = ...
我有点困惑,您所说的页面加载完成、“DOM 加载”或“内容加载”是什么意思?在 html 页面加载可以在两种类型的事件之后触发事件。
DOM 加载:确保从头到尾加载整个 DOM 树。但不能保证加载参考内容。假设您通过img
标签添加了图像,因此此事件确保所有已img
加载但未正确加载图像。要获得此事件,您应该编写以下方式:
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
或者使用 jQuery:
$(document).ready(function(){
// your code
});
在 DOM 和内容加载之后:这也表示 DOM 和内容加载。它将确保不仅img
标记它还将确保加载所有图像或其他相关内容。要获得此事件,您应该编写以下方式:
window.addEventListener('load', function() {...})
或者使用 jQuery:
$(window).on('load', function() {
console.log('All assets are loaded')
})
如果您可以使用 jQuery,请查看load。然后,您可以将函数设置为在元素完成加载后运行。
例如,考虑一个带有简单图像的页面:
<img src="book.png" alt="Book" id="book" />
事件处理程序可以绑定到图像:
$('#book').load(function() {
// Handler for .load() called.
});
如果需要加载当前窗口上的所有元素,可以使用
$(window).load(function () {
// run code
});
如果您不能使用 jQuery,那么纯 Javascript 代码基本上是相同数量(如果不是更少的话)的代码:
window.onload = function() {
// run code
};
如果您想在 html 页面中调用 js 函数,请使用 onload 事件。当用户代理完成加载一个窗口或 FRAMESET 中的所有框架时,就会发生 onload 事件。此属性可与 BODY 和 FRAMESET 元素一起使用。
<body onload="callFunction();">
....
</body>