本文共 3976 字，大约阅读时间需要 13 分钟。
我正在使用<head>内的<script>执行外部脚本。
现在，由于脚本是在页面加载之前执行的，因此我无法访问<body> 。 在文档“加载”后（HTML已完全下载并在RAM中），我想执行一些。 执行脚本时，是否有任何我可以钩住的事件会在页面加载时触发？
这是一个基于页面加载后延迟js加载的脚本，
我该放在哪里？
在
</body>标记之前（HTML文件底部附近）将代码粘贴到HTML中。
它有什么作用？
该代码表示等待整个文档加载，然后加载外部文件
deferredfunctions.js。
这是上述代码的示例
我基于 pagespeed google概念而编写了此文件，也从这篇文章中获取了
如果您使用的是jQuery，
$(function() {...});
相当于
$(document).ready(function () { })
请参见
Hello World!
此代码运行良好。
但是window.onload方法具有各种依赖性。 因此，它可能不会一直工作。
我有时发现在更复杂的页面上，并非在window.onload被触发时已加载所有元素。 如果是这种情况，请在函数延迟之前添加setTimeout。 它不是很优雅，但是可以很好地渲染它。
window.onload = function(){ doSomethingCool(); }; 变成...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); }; 如果脚本加载在文档的<head>中，则可以在script标签中使用defer属性。
例：
来自 ：
推迟
设置此布尔值属性是为了向浏览器指示脚本应在文档解析后但在触发DOMContentLoaded之前执行。
如果不存在src属性（即，对于内联脚本），则不得使用此属性，在这种情况下，它将无效。
要对动态插入的脚本实现类似的效果，请改用async = false。 具有defer属性的脚本将按照它们在文档中出现的顺序执行。
document.onreadystatechange = function(){ if(document.readyState === 'complete'){ /*code here*/ }} 看这里： :
我的建议为脚本标记使用asnyc属性，这有助于您在页面加载后加载外部脚本
关于如何使用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 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" ); }); 当初始HTML文档已完全加载和解析而没有等待样式表，图像和子帧完成加载时，将引发此事件。 在此阶段，您可以根据用户设备或带宽速度以编程方式优化图像和CSS的加载。
DOM加载后的示例（在img和css之前）：
document.addEventListener("DOMContentLoaded", function(){ //....}); 注意：同步JavaScript会暂停DOM的解析。 如果您希望在用户请求页面后尽快解析DOM，则可以将JavaScript异步化并
完全不同的事件load只能用于检测已满的页面 。 在DOMContentLoaded更合适的地方使用负载是一个非常普遍的错误，因此要谨慎。
加载并解析所有内容后的摘录：
window.addEventListener("load", function(){ // ....}); MDN资源：
所有事件的MDN列表：
将此代码与jQuery库一起使用，效果会很好。
$(window).bind("load", function() { // your javascript event}); 使用自我执行onload函数
window.onload = function (){ /* statements */}(); $(window).on("load", function(){ ... }); 最适合我。
$(document).ready(function(){ ... }); 可以使用，但是不会等到页面加载完毕。
jQuery(window).load(function () { ... }); 对我不起作用，中断了下一个内联脚本。 我还使用jQuery 3.2.1以及其他一些jQuery分支。
要隐藏我的网站加载叠加层，我使用以下方法：
看钩子document.onload或在jQuery $(document).load(...) 。
只需定义<body onload="aFunction()"> ，即可在页面加载后调用。 然后，脚本中的代码将被aFunction() { }括起来。
这些解决方案将起作用：
要么
document.onload = function ...
甚至
window.onload = function ...
请注意， 最后一个选项是更好的选择，因为它不并且被 。
您可以在体内放置“ onload”属性
......
或者，如果您使用的是jQuery，则可以
$(document).ready(function(){ /*code here*/ }) or $(window).load(function(){ /*code here*/ }) 希望它能回答您的问题。
请注意，$（window）.load将在页面上呈现文档后执行。
正如Daniel所说，您可以使用document.onload。
但是，各种JavaScript框架（jQuery，Mootools等）都使用自定义事件“ domready”，我想它必须更有效。 如果您使用javascript开发，强烈建议您使用框架，它们可以大大提高您的生产率。
使脚本设置在加载时运行的功能的合理可移植，非框架的方式：
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; }} 使用 （我喜欢它）：
YAHOO.util.Event.onDOMReady(function(){ //your code}); 便携美观！ 但是，如果您不将YUI用于其他内容（请参阅其文档），我会说不值得使用它。
注意：要使用此代码，您需要导入2个脚本
转载地址：http://lpdnb.baihongyu.com/