页面加载后执行的JavaScript
-
03-07-2019 - |
题
我正在执行外部脚本,使用<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
});
便携而美丽!但是,如果您不将YUI用于其他内容(请参阅其文档),我会说它不值得使用它。
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 */
}();