页面加载后加载脚本？答案

【问题标题】：Load scripts after page has loaded?页面加载后加载脚本？
【发布时间】：2011-03-30 19:08:54
【问题描述】：

是否可以加载某些脚本，例如

<script type="text/javascript" src="somescript.js"></script>

页面的其余部分何时加载？

想象一下，我有一些像这样的较大脚本文件，在加载页面时不需要这些文件。例如。我正在使用仅在单击按钮时使用的 Google Maps API（因此不在页面加载时使用）。

是否可以先加载页面的其余部分，然后再在脑海中处理所有这些脚本标签？

【问题讨论】：

如果它们列在 head 中则不会，但如果您使用 yepnope{yepnopejs.com} 之类的东西，那么您只能在需要时加载它们。

标签： javascript

【解决方案1】：

在 JQuery 中，您可以 do this 准备好文档

$.getScript("somescript.js", function(){
   alert("Script loaded and executed.");
 });

【讨论】：

这也适用于加载字体文件，还是仅适用于 JavaScript 文件？文档不清楚。
问题中没有 JQuery

【解决方案2】：

只需在脚本文件中添加defer参数

<script src="pathToJs" defer></script>

你也可以查看this问题

【讨论】：

不，这是错误的。 async 参数指定脚本在准备就绪时执行，无论页面加载多远。 defer 可能就是你要找的。span>
完美运行！谢谢
延迟加载 js 在 domInteractive 之后但在 domContentLoaded 之前。

【解决方案3】：

这是可能的。我在一个 AJAX 密集型站点中做类似的事情，但我正在加载 Google Charts API。这是我在页面上单击按钮时用来加载 Google Charts API 的代码。

function loadGoogleChartsAPI() {
    var script = document.createElement("script");
    // This script has a callback function that will run when the script has
    // finished loading.
    script.src = "http://www.google.com/jsapi?callback=loadGraphs";
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}

function loadGraphs() {
    // Add callback function here.
}

这使用了一个回调函数，该函数将在脚本加载后运行。

【讨论】：

您可以使用 onload 事件来检测脚本何时完成加载。详情见我的回答stackoverflow.com/a/54032144/5175935

【解决方案4】：

没有人提到这些？

$(window).load(function(){
    // do something 
});

或

$(window).bind("load", function() {
   // do something
});

【讨论】：

【解决方案5】：

$(document).ready(function() {
    var ss = document.createElement("script");
    ss.src = "somescript.js";
    ss.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(ss);
});

【讨论】：

欢迎来到 SO :) 最好在您发布的代码中添加解释作为答案，这样可以帮助访问者理解为什么这是一个很好的答案。

【解决方案6】：

请看我的代码。 onload 事件将在脚本完成加载时发生。否则会发生onerror事件。

function loadJavaScript() {
    var script = document.createElement("script");
    script.src = "javaScript.js";
    script.type = "text/javascript";
    script.onload = function () {
        console.log('script was loaded successfully');
    }
    script.onerror = function (e) {
        console.error('script.onerror');
    }
    document.getElementsByTagName("head")[0].appendChild(script);
}

感谢answer。

另见my code的脚本负载。

【讨论】：

【解决方案7】：

使用jquery的getScript方法！还是尝试简单地将这个脚本放在页面末尾？

【讨论】：

【解决方案8】：

是的，这可以通过从代码中动态注入 JavaScript 文件来实现。有很多库可供您使用：RequireJS、HeadJS 等。最近我发现this 文档比较了很多 JavaScript 加载器库。

【讨论】：

【解决方案9】：

要让页面在加载脚本之前显示，请使用async 属性：

<script src="//url/to/script.js" async></script>

要在浏览器中隐藏加载微调器，请在页面加载完成后附加脚本标记：

<script>
document.addEventListener('DOMContentLoaded', function() {
  var script = document.createElement('script');
  script.src = '//url/to/script.js';
  document.getElementsByTagName('body')[0].appendChild(script);
});
</script>

【讨论】：

【解决方案10】：

是的，这完全有可能。将onLoad="foo();" 事件添加到您的<body> 标记并让它调用您的脚本。您需要将外部 JS 包装在一个函数中并执行以下操作：

//EXTERNAL JS (jsstuff.js)

function Mojo() {
    document.getElementById('snacks').style.visibility = "visible";
    alert("we are victorious!");
}

//YOUR HTML

<html>
    <head>
        <script type='text/javascript'></script>
    </head>
    <body onLoad='Mojo();'>
        <div id='snacks'>
            <img src='bigdarnimage.png'>
        </div>
    </body>
</html>

【讨论】：