我正在执行一个外部脚本,使用<脚本>内<头>。
现在,由于脚本在页面加载之前执行,我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件,我可以挂钩到当我的脚本执行,这将在页面加载触发?
我正在执行一个外部脚本,使用<脚本>内<头>。
现在,由于脚本在页面加载之前执行,我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件,我可以挂钩到当我的脚本执行,这将在页面加载触发?
当前回答
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}
看这里:http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
其他回答
Working Fiddle on <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>
< script type = " text / javascript " > 美元(窗口)。绑定("load", function() { // javascript事件 }); > < /脚本
使用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>
<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
如果脚本是在文档的<head>中加载的,那么可以在script标记中使用defer属性。
例子:
<script src="demo_defer.js" defer></script>
从https://developer.mozilla.org:
推迟 此布尔属性被设置为向浏览器指示脚本 意味着在解析文档之后执行,但在解析之前 发射DOMContentLoaded。内 如果src 属性不存在(即对于内联脚本),在这种情况下它会 没有效果。 为实现动态插入脚本使用的类似效果 异步= false。具有defer属性的脚本将在 它们在文档中出现的顺序。