延迟 javascript 的 google 页面洞察加载

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

这很快，但我认为它应该有效。

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);
    }
}

Answer 2

在此处找到

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
});

延迟 javascript 的 google 页面洞察加载

Defer Loading of javascript for google page insights

javascript

jquery

onload

deferred