推迟加载 javascript 以获得谷歌页面洞察

ui-unicorn.co.uk

我有一个延迟加载 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 尚未完成下载，那么你将如何解决这个问题？我猜是一个监听器/如果完成加载加载其他人等待...提前致谢

康明达07

在此处找到使用 Promises 使用 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
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。