<script>我正在使用inside执行外部脚本<head>。
现在，由于脚本在页面加载之前执行，因此我无法访问<body>，除其他外。我想在文档“加载”后执行一些 JavaScript（HTML 完全下载并在 RAM 中）。当我的脚本执行时，是否有任何可以在页面加载时触发的事件？
问问题
1959803 次
26 回答
361
请记住，加载页面有多个阶段。顺便说一句，这是纯 JavaScript
“DOMContentLoaded”
当初始 HTML 文档已完全加载和解析时触发此事件，无需等待样式表、图像和子框架完成加载。在这个阶段，您可以根据用户设备或带宽速度以编程方式优化图像和 CSS 的加载。
在加载 DOM 之后执行（在图像和 CSS 之前）：
document.addEventListener("DOMContentLoaded", function(){
//....
});
注意：同步 JavaScript 会暂停 DOM 的解析。如果您希望在用户请求页面后尽快解析 DOM，您可以将 JavaScript 设为异步并优化样式表的加载
“加载”
一个非常不同的事件load应该只用于检测完全加载的页面。在 DOMContentLoaded 更合适的地方使用 load 是一个非常普遍的错误，所以要小心。
在加载和解析所有内容后执行：
window.addEventListener("load", function(){
// ....
});
MDN 资源：
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load
所有事件的 MDN 列表：
于 2016-03-19T00:50:30.190 回答
207
让您的脚本设置一个在加载时运行的函数的合理可移植、非框架方式：
if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
yourFunctionName(evt);
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}
于 2009-04-30T16:59:58.797 回答
135
您可以在正文中放置一个“onload”属性
...<body onload="myFunction()">...
或者，如果您使用的是 jQuery，您可以这样做
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
我希望它能回答你的问题。
请注意，$(window).load 将在您的页面上呈现文档后执行。
于 2009-04-30T16:42:29.370 回答
78
如果脚本是在<head>文档中加载的，那么可以使用defer脚本标签中的属性。
例子：
<script src="demo_defer.js" defer></script>
来自https://developer.mozilla.org：
推迟
此布尔属性设置为向浏览器指示脚本将在文档被解析之后但在触发 DOMContentLoaded 之前执行。
如果 src 属性不存在（即对于内联脚本），则不得使用此属性，在这种情况下，它将不起作用。
要为动态插入的脚本实现类似的效果，请改用 async=false。具有 defer 属性的脚本将按照它们在文档中出现的顺序执行。
于 2014-01-10T08:52:41.803 回答
33
这是一个基于页面加载后延迟js加载的脚本，
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
我在哪里放置这个？
将代码粘贴到 HTML 中标记之前的
</body>位置（靠近 HTML 文件的底部）。
它有什么作用？
此代码表示等待整个文档加载，然后加载外部文件
deferredfunctions.js。
这是上面代码的一个例子 - JS的延迟渲染
我基于延迟加载 javascript pagespeed google 概念编写了这篇文章，也来自这篇文章Defer loading javascript
于 2013-02-05T12:40:15.160 回答
22
查看 hookingdocument.onload或 jQuery $(document).load(...)。
于 2009-04-30T16:40:17.847 回答
22
JavaScript
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");
}
});
jQuery 相同：
$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});
注意： - 不要使用以下标记（因为它会覆盖其他同类声明）：
document.onreadystatechange = ...
于 2020-04-06T16:22:49.237 回答
11
工作小提琴<body onload="myFunction()">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction(){
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
于 2013-03-26T09:39:35.327 回答
11
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
http://www.feedthebot.com/pagespeed/defer-loading-javascript.html
于 2014-09-11T19:23:34.707 回答
9
如果您使用的是 jQuery，
$(function() {...});
相当于
$(document).ready(function () { })
或另一种简写：
$().ready(function () { })
于 2013-03-06T20:39:46.337 回答
9
我有时会在更复杂的页面上发现，在 window.onload 被触发时并非所有元素都已加载。如果是这种情况，请在您的函数之前添加 setTimeout 以延迟片刻。它并不优雅，但它是一个简单的 hack，渲染效果很好。
window.onload = function(){ doSomethingCool(); };
变成……
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
于 2013-07-20T21:13:54.907 回答
7
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}
看这里： http: //msdn.microsoft.com/en-us/library/ie/ms536957 (v=vs.85).aspx
于 2014-09-11T11:41:40.550 回答
6
只需定义<body onload="aFunction()">将在页面加载后调用。您在脚本中的代码不是由aFunction() { }.
于 2009-04-30T16:41:05.957 回答
4
<body onload="myFunction()">
这段代码运行良好。
但是window.onload方法有各种依赖关系。所以它可能不会一直有效。
于 2013-04-29T11:32:29.427 回答
4
比较
在下面的片段中，我收集了选择的方法并显示了它们的顺序。评论
- 任何现代
document.onload浏览器都不支持 (X) （从不触发事件） - 如果您
<body onload="bodyOnLoad()">同时使用 (F) 和window.onload(E)，那么只会执行第一个（因为它会覆盖第二个） - (F) 中给出的事件处理程序
<body onload="...">由附加onload函数包装 document.onreadystatechange(D) 不覆盖document .addEventListener('readystatechange'...)(C) 可能 cecasueonXYZevent-like方法独立于addEventListener队列（允许添加多个侦听器）。执行这两个处理程序之间可能没有任何反应。- 所有脚本都在控制台中写入其时间戳 - 但也
div可以在正文中写入其时间戳的脚本（在脚本执行后单击“整页”链接以查看它）。 - 解决方案
readystatechange（C，D）由浏览器多次执行，但针对不同的文档状态：- loading - 文档正在加载（没有在代码段中触发）
- 交互式- 文档被解析，之前触发
DOMContentLoaded - 完成- 文档和资源已加载，之前触发
body/window onload
<html>
<head>
<script>
// solution A
console.log(`[timestamp: ${Date.now()}] A: Head script`);
// solution B
document.addEventListener("DOMContentLoaded", () => {
print(`[timestamp: ${Date.now()}] B: DOMContentLoaded`);
});
// solution C
document.addEventListener('readystatechange', () => {
print(`[timestamp: ${Date.now()}] C: ReadyState: ${document.readyState}`);
});
// solution D
document.onreadystatechange = s=> {print(`[timestamp: ${Date.now()}] D: document.onreadystatechange ReadyState: ${document.readyState}`)};
// solution E (never executed)
window.onload = () => {
print(`E: <body onload="..."> override this handler`);
};
// solution F
function bodyOnLoad() {
print(`[timestamp: ${Date.now()}] F: <body onload='...'>`);
infoAboutOnLoad(); // additional info
}
// solution X
document.onload = () => {print(`document.onload is never fired`)};
// HELPERS
function print(txt) {
console.log(txt);
if(mydiv) mydiv.innerHTML += txt.replace('<','<').replace('>','>') + '<br>';
}
function infoAboutOnLoad() {
console.log("window.onload (after override):", (''+document.body.onload).replace(/\s+/g,' '));
console.log(`body.onload==window.onload --> ${document.body.onload==window.onload}`);
}
console.log("window.onload (before override):", (''+document.body.onload).replace(/\s+/g,' '));
</script>
</head>
<body onload="bodyOnLoad()">
<div id="mydiv"></div>
<!-- this script must te at the bottom of <body> -->
<script>
// solution G
print(`[timestamp: ${Date.now()}] G: <body> bottom script`);
</script>
</body>
</html>于 2020-06-17T17:59:38.047 回答
3
关于如何检测文档是否已使用 Javascript 或 Jquery 加载有一个非常好的文档。
使用本机 Javascript 这可以实现
if (document.readyState === "complete") {
init();
}
这也可以在区间内完成
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
init();
}
}, 100);
switch (document.readyState) {
case "loading":
// The document is still loading.
break;
case "interactive":
// The document has finished loading. We can now access the DOM elements.
var span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
break;
case "complete":
// The page is fully loaded.
console.log("Page is loaded completely");
break;
}
使用 Jquery 仅检查 DOM 是否准备就绪
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});
要检查是否所有资源都已加载，请使用 window.load
$( window ).load(function() {
console.log( "window loaded" );
});
于 2015-12-12T08:42:00.907 回答
3
将此代码与 jQuery 库一起使用，这将非常好。
$(window).bind("load", function() {
// your javascript event
});
于 2017-12-21T13:32:26.847 回答
3
$(window).on("load", function(){ ... });
.ready()最适合我。
$(document).ready(function(){ ... });
.load()会起作用，但不会等到页面加载完毕。
jQuery(window).load(function () { ... });
对我不起作用，会破坏下一个内联脚本。我还使用 jQuery 3.2.1 以及其他一些 jQuery 分支。
为了隐藏我的网站加载覆盖，我使用以下内容：
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
于 2018-03-08T02:42:57.043 回答
2
您可以在特定脚本文件上编写一个函数，并使用 onload 属性将其调用到您的 body 元素中。
示例：
<script>
afterPageLoad() {
//your code here
}
</script>
现在使用 script 标签将您的脚本调用到您的 html 页面中：
<script src="afterload.js"></script>
进入你的身体元素；像这样添加 onload 属性：
<body onload="afterPageLoad();">
于 2021-04-02T08:16:11.947 回答
2
DOMContentLoaded 事件在初始 HTML 文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载。
document.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
});加载整个页面时会触发 load 事件，包括所有相关资源，例如样式表和图像。这与 DOMContentLoaded 不同，后者在页面 DOM 加载后立即触发，无需等待资源完成加载。
window.addEventListener('load', (event) => {
console.log('page is fully loaded');
});于 2021-11-15T07:31:25.457 回答
1
正如丹尼尔所说，您可以使用 document.onload。
各种 javascript 框架（jQuery、Mootools 等）都使用自定义事件“domready”，我想这一定更有效。如果您使用 javascript 进行开发，我强烈建议您使用框架，它们会大大提高您的工作效率。
于 2009-04-30T16:47:28.233 回答
1
使用YUI 库（我喜欢它）：
YAHOO.util.Event.onDOMReady(function(){
//your code
});
便携又漂亮！但是，如果您不将 YUI 用于其他东西（请参阅其文档），我会说不值得使用它。
注意：要使用此代码，您需要导入 2 个脚本
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>
于 2009-04-30T17:36:51.377 回答
0
我建议使用asnyc脚本标签的属性，这可以帮助您在页面加载后加载外部脚本
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
于 2015-03-30T05:43:37.123 回答
0
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>于 2015-09-29T08:43:45.973 回答
0
我可以通过此代码捕获页面加载
<script>
console.log("logger saber");
window.onload = (event) => {
console.log('page is fully loaded');
document.getElementById("tafahomNameId_78ec7c44-beab-40de-9326-095f474519f4_$LookupField").value = 1;;
};
</script>
于 2021-03-30T10:43:53.977 回答