Question

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

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

当页面的其余部分已加载？

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

在处理我头脑中的所有脚本标签之前，是否可以先加载页面的其余部分？

Answer 1

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

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

Answer 2

有可能。我在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.
}

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

Answer 3

只需添加到该脚本文件defer参数

即可

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

您也可以查看this个问题

Answer 4

没有人提到这些？

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

或

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

Answer 5

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

Answer 6

是的，可以通过从代码中动态注入JavaScript文件来实现。您可以使用许多库：RequireJS，HeadJS等。最近我找到了this文档，它比较了许多JavaScript加载程序库。

Answer 7

使用jquery的getScript方法！或者只是将这个脚本放在页面的末尾？

Answer 8

是的，这完全有可能。将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>

Answer 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>

Answer 10

请参阅我的代码。脚本完成加载后，将发生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

页面加载后加载脚本？

10 个答案: