页面加载后加载脚本？

Question

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

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

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

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

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

Answer 1

在JQuery中,您可以在文档就绪时执行此操作

$.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>

你也可以查看这个问题

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

请看我的代码。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);
}

感谢解答。

另请参阅我的脚本加载代码。