我正在执行一个外部脚本,使用<脚本>内<头>。
现在,由于脚本在页面加载之前执行,我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件,我可以挂钩到当我的脚本执行,这将在页面加载触发?
我正在执行一个外部脚本,使用<脚本>内<头>。
现在,由于脚本在页面加载之前执行,我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件,我可以挂钩到当我的脚本执行,这将在页面加载触发?
当前回答
这些解决方案是有效的:
正如注释中提到的,使用defer:
<script src="deferMe.js" defer></script>
or
<body onload="script();">
or
document.onload = function ...
甚至
window.onload = function ...
请注意,最后一个选项是更好的方法,因为它不引人注目,而且被认为更标准。
其他回答
我发现有时在更复杂的页面上,并不是所有的元素都在时间窗口加载。Onload被触发。如果是这种情况,在函数延迟片刻之前添加setTimeout。它不是优雅的,但它是一个简单的hack渲染良好。
window.onload = function(){ doSomethingCool(); };
变得……
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
<body onload="myFunction()">
这段代码运行良好。
但窗口。Onload方法有各种依赖关系。所以它可能不会一直有效。
使用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>
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 = ...
有一个关于如何使用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" );
});