延迟加载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

在这里找到 使用 Promise 使用 JavaScript 加载 jQuery

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