页面加载后执行的JavaScript
https://stackoverflow.com/questions/807878
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我正在执行外部脚本，使用<script>内部<head>。
现在，由于脚本在页面加载之前执行，我无法访问<body>等。我希望在文档<！> quot; loaded <！>之后执行一些JavaScript。 （HTML已完全下载并在RAM中）。我的脚本执行时是否有任何可以挂钩的事件，这些事件会在页面加载时触发？
解决方案
这些解决方案可行：
<body onload="script();">
或
document.onload = function ...
甚至
window.onload = function ...
请注意最后一个选项是更好的方式，因为它是 unobstrusive 并且被视为更标准。
其他提示
合理的可移植，非框架方式让您的脚本设置一个在加载时运行的函数：
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;
}
}
请记住，加载页面有多个阶段。顺便说一句，这是纯JavaScript
QUOT <！>; DOMContentLoaded QUOT <！>;
初始HTML文档已完全加载并解析时会触发此事件，而无需等待样式表，图像和子帧完成加载。在此阶段，您可以根据用户设备或带宽速度以编程方式优化图像和css的加载。
加载DOM后的异常（在img和css之前）：
document.addEventListener("DOMContentLoaded", function(){
//....
});
<！>注意：同步JavaScript暂停解析DOM。 如果您希望在用户请求页面后尽快解析DOM，则可以将您的JavaScript异步和优化样式表的加载
QUOT;负载QUOT <！>;
一个非常不同的事件加载，只应用于检测完全加载的页面。使用负载是一个非常流行的错误，其中DOMContentLoaded会更合适，所以要小心。
加载并解析所有内容后的Exectues：
window.addEventListener("load", function(){
// ....
});
MDN资源：
https://developer.mozilla.org/en-US/文档/网络/活动/ DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web /活动/负载
所有活动的MDN列表：
您可以输入<！>“onload <！>”;身体内的属性
...<body onload="myFunction()">...
或者，如果您使用的是jQuery，则可以执行
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
我希望它能回答你的问题。
请注意，$（窗口）.load将在页面上呈现文档后执行。
如果脚本是在文档的<head>中加载的，那么可以在脚本标记中使用defer属性。
示例：
<script src="demo_defer.js" defer></script>
来自 https://developer.mozilla。有机：
<强>延迟
此布尔属性设置为向浏览器指示脚本 意味着在解析文档之后但之前执行 触发DOMContentLoaded。
如果是src，则不能使用此属性 属性不存在（即对于内联脚本），在这种情况下它会 没有效果。
为动态插入的脚本使用实现类似的效果 而是async = false。带有defer属性的脚本将执行 它们在文档中出现的顺序。
这是一个基于加载页面后延迟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
我是根据 deferred loading of javascript pagespeed google concept写的并且还来自本文推迟加载JavaScript
看看挂钩document.onload或jQuery $(document).load(...)。
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}
请看这里： http：// msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
Google推荐的最佳方法。 ：）
<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
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
如果您使用的是jQuery，
$(function() {...});
相当于
$(document).ready(function () { })
<body onload="myFunction()">
此代码效果很好。
但window.onload方法有各种依赖关系。所以它可能不会一直有效。
我有时会在更复杂的页面上发现并非所有元素都被时间窗口加载。如果是这种情况，请在函数延迟之前添加setTimeout。它并不优雅，但这是一个很好的简单黑客。
window.onload = function(){ doSomethingCool(); };
...变为
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
只需定义<body onload="aFunction()">将在页面加载后调用。脚本中的代码不包含在aFunction() { }中。
$（window）.on（<！> quot; load <！> quot;，function（）{...}）;
.ready（）最适合我。
$(document).ready(function(){ ... });
.load（）将有效，但不会等到页面加载完毕。
jQuery(window).load(function () { ... });
对我不起作用，打破下一个内联脚本。我也在使用jQuery 3.2.1以及其他一些jQuery forks。
要隐藏我的网站加载叠加层，我使用以下内容：
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
使用 YUI图书馆（我喜欢）：
YAHOO.util.Event.onDOMReady(function(){
//your code
});
N.B。 ：要使用此代码，您需要导入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>
有关如何使用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" );
});
将此代码与jQuery库一起使用，这将完全正常。
$(window).bind("load", function() {
// your javascript event
});
正如丹尼尔所说，你可以使用document.onload。
各种javascript框架（jQuery，Mootools等）使用自定义事件'domready'，我想这必须更有效。如果你正在使用javascript进行开发，我强烈建议使用一个框架，它们可以大大提高你的工作效率。
我建议使用脚本标记的asnyc属性，以帮助您在页面加载后加载外部脚本
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>
使用自执行onload函数
window.onload = function (){
/* statements */
}();
