在页面加载后执行的Javascript
我正在执行一个外部脚本，使用<head>内的<script> <head> 。
现在，由于脚本在页面加载之前执行，我无法访问<body>等等。 我想在文档“加载”（HTML完全下载和内存）后执行一些JavaScript。 是否有任何事件可以挂钩到我的脚本执行，这将触发页面加载？
这些解决scheme将工作：
<body onload="script();">
要么
document.onload = function ...
甚至
window.onload = function ...
请注意， 最后的select是一个更好的方法，因为它是不显眼的 ，被认为是更标准的 。
让您的脚本在加载时运行的function合理便携，无框架的方式运行：
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; } }
你可以在主体中join一个“onload”属性
...<body onload="myFunction()">...
或者，如果你使用jQuery，你可以做
$(document).ready(function(){ /*code here*/ }) or $(window).load(function(){ /*code here*/ })
我希望能回答你的问题。
请注意$（window）.load将在您的页面上呈现文档之后执行。
请记住，加载页面有不止一个阶段。 顺便说一句，这是纯粹的JavaScript
“DOMContentLoaded”
当初始的HTML文档被完全加载和parsing时 ，这个事件被触发，而不用等待样式表，图像和子帧完成加载。 在这个阶段，您可以通过编程优化基于用户设备或带宽速度的图像和CSS的加载。
DOM加载之后的执行（在img和css之前）：
document.addEventListener("DOMContentLoaded", function(){ //.... });
注意：同步JavaScript暂停parsingDOM。 如果您希望在用户请求页面后尽快parsingDOM，则可以将JavaScriptasynchronous化并优化样式表的加载
“加载”
一个非常不同的事件， 负载 ，应该只用于检测一个满载的页面 。 在DOMContentLoaded更合适的情况下使用load是一个令人难以置信的错误，所以要谨慎。
一切都被加载和parsing后的执行：
window.addEventListener("load", function(){ // .... });;
MDN资源：
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load
MDN所有事件的列表：
如果脚本被加载到文档的<head>内，那么可以使用script标签中的defer属性。
例：
<script src="demo_defer.js" defer></script>
从w3schools ：
定义和用法defer属性是一个布尔属性。
当存在时，它指定脚本在页面parsing完成时执行。
注意：defer属性仅用于外部脚本（只有在src属性存在的情况下才能使用）。
注意：有几种方法可以执行外部脚本：
如果存在asynchronous：脚本与页面的其余部分asynchronous执行（当页面继续parsing时，脚本将被执行）如果async不存在并且存在延迟：脚本在页面完成parsing时执行If不存在asynchronous或延迟：在浏览器继续parsing页面之前，脚本被立即提取并执行
这是一个基于加载页面之后的延迟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的渲染
我写这个基于JavaScript页面速度谷歌的概念，也来自这篇文章的延迟加载的JavaScript的加载
查看hooking document.onload或jQuery $(document).load(...) 。
最好的方法，也是由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 () { })
查看JQuery $ function（）触发了什么事件？
<body onload="myFunction()">
这个代码运行良好。
但是window.onload方法有各种依赖。 所以它可能无法一直工作。
document.onreadystatechange = function(){ if(document.readyState === 'complete'){ /*code here*/ } }
看这里： http : //msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
只要定义<body onload="aFunction()"> ，它将在页面加载完成后调用。 脚本中的代码不是由aFunction() { } 。
使用YUI库 （我喜欢它）：
YAHOO.util.Event.onDOMReady(function(){ //your code });
便携和美丽！ 但是，如果您不使用YUI来处理其他内容（请参阅doc），我会说这不值得使用它。
注意：要使用此代码，您需要导入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>
我发现有时候在更复杂的页面上并不是所有的元素都被时间窗口加载。 如果是这样的话，在你的函数延迟之前添加setTimeout是一个时刻。 这不是优雅，但它是一个简单的黑客，呈现良好。
window.onload = function(){ doSomethingCool(); };
成为…
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
关于如何检测文档是否使用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" ); });
我的build议使用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 )}; </script>
正如丹尼尔所说，你可以使用document.onload。
不同的JavaScript框架（jQuery，Mootools等）使用自定义事件“domready”，我想这一定更有效。 如果你正在开发JavaScript，我强烈build议利用框架，他们大大提高你的生产力。
jQuery为你包装。 你可能会发现它是最简单的解决scheme。
//经过testing和工作:)
$（document）.ready（function（）{functon1（）; function2（）}）;
