延迟加载 javascript 以获取谷歌页面洞察

Question

我有一个延迟加载 javascript 的代码我想知道代码是否会根据它们在代码中的位置按顺序加载脚本（JQuery.min 首先）？

function downloadJSAtOnload() {


var element01 = document.createElement("script");
element01.src = "js/jquery.min.js";
document.body.appendChild(element01);

var element02 = document.createElement("script");
element02.src = "js/plugins.js";
document.body.appendChild(element02);

var element03 = document.createElement("script");
element03.src = "js/scripts.js";
document.body.appendChild(element03);


var element04 = document.createElement("script");
element04.src = "js/SmoothScroll.min.js";
document.body.appendChild(element04);

var element05 = document.createElement("script");
element05.src = "js/contact-form.js";
document.body.appendChild(element05);

}

if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

如果这没有先加载JQuery.min，然后再加载其他js文件，你如何让JQuery.min成为第一个加载的脚本，然后加载其余的脚本？ 另外我猜例如 contact-form.js 将是第一个完成加载的，因为它很小，所以这可能会导致 Uncaught ReferenceError: $ is not defined 我猜是因为 JQuery.min 还没有完成下载所以你将如何解决这个问题?我猜是一个听众/如果完成加载加载其他人等待...... 在此先感谢

Answer 1

在这里找到Load jQuery with JavaScript using Promises

function loadScript(url) {
    return new Promise(function(resolve  reject) {
        var script = document.createElement("script");
        script.onload = resolve;
        script.onerror = reject;
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    });
}

function loadjQuery() {
    if (window.jQuery) {
        // already loaded and ready to go
        return Promise.resolve();
    } else {
        return loadScript('https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js');
    }
}


// Usage:
loadjQuery().then(function() {
    // code here that uses jQuery
}, function() {
    // error loading jQuery
});

Answer 2

这很快，但我认为应该可以。

function downloadJSAtOnload() {
    var element01 = document.createElement("script");
    element01.src = "js/jquery.min.js";
    document.body.appendChild(element01);

    element01.onload = function() {
        var element02 = document.createElement("script");
        element02.src = "js/plugins.js";
        document.body.appendChild(element02);

        var element03 = document.createElement("script");
        element03.src = "js/scripts.js";
        document.body.appendChild(element03);


        var element04 = document.createElement("script");
        element04.src = "js/SmoothScroll.min.js";
        document.body.appendChild(element04);

        var element05 = document.createElement("script");
        element05.src = "js/contact-form.js";
        document.body.appendChild(element05);
    }
}