我正在执行一个外部脚本,使用<脚本>内<头>。
现在,由于脚本在页面加载之前执行,我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件,我可以挂钩到当我的脚本执行,这将在页面加载触发?
我正在执行一个外部脚本,使用<脚本>内<头>。
现在,由于脚本在页面加载之前执行,我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件,我可以挂钩到当我的脚本执行,这将在页面加载触发?
当前回答
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 = ...
其他回答
<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
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}
看这里:http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
$(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>
有一个关于如何使用Javascript或Jquery检测文档是否已加载的非常好的文档。
使用本地Javascript可以实现这一点
if (document.readyState === "complete") {
init();
}
这也可以在区间内完成
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
init();
}
}, 100);
由Mozilla编写
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" );
});
正如Daniel所说,您可以使用document.onload。
然而,各种javascript框架(jQuery, Mootools等)使用一个自定义事件'domready',我猜这一定是更有效的。如果你使用javascript进行开发,我强烈建议你使用框架,这将极大地提高你的工作效率。