页面加载后加载脚本？

Question

页面加载后加载脚本？

49

是否可以加载特定的脚本，例如

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

当页面的其余部分加载完成后再加载脚本吗？

假设我有一些较大的脚本文件，在页面加载时不需要它们。例如，我使用的是Google Maps API，仅在单击按钮时使用（因此不会在页面加载时使用）。

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

- matt

不是如果它们被列在头部，而是如果你使用像yepnope{http://yepnopejs.com/}这样的东西，那么你可以在需要它们时才加载它们。 - idbentley

10个回答

20

简单来说，您可以在脚本文件中添加defer参数。

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

你也可以查看这个问题。

- nikoss

3

不，这是错误的。async参数指定脚本在准备就绪时执行，而不管页面加载到哪个程度。defer可能是你要找的。 - Alexander Holsgrove

1

完美运行！谢谢 - bcarroll

延迟加载js文件，直到domInteractive事件触发但在domContentLoaded事件之前。 - Jitendra Pancholi

16

这是可能的。我在一个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.
}

这里使用了一个回调函数，当脚本加载完成后它将被执行。

- smfoote

您可以使用onload事件来检测脚本何时完成加载。有关详细信息，请参见我的答案https://dev59.com/hm035IYBdhLWcg3wVeXn#54032144。 - Andrej

9

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

- Dan Linh

2

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

9

没有人提到这些吗？

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

或者

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

- laike9m

5

请查看我的代码。当脚本加载完成时，将会触发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);
}

感谢答案的帮助。

此外，请参考我的代码来加载脚本。

- Andrej

2

如果想在脚本加载前允许页面显示，请使用 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>

- danijar

1

使用jQuery的getScript方法！或者尝试将此脚本简单地放在页面末尾？

- Flavio CF Oliveira

1

是的，通过从代码动态注入JavaScript文件是可能的。有很多库可以使用：RequireJS, HeadJS 等等。最近我发现了this文档，它比较了许多JavaScript加载器库。

- Atanas Korchev

0

没错，这是完全可能的。在你的 <body> 标签中添加一个 onLoad="foo();" 事件，并调用你的脚本。你需要将外部 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>

- Winfield Trail

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- slandau · Accepted Answer

在jQuery中，你可以在文档准备好后使用这个方法

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