推迟加载谷歌页面洞察的javascript

时间:2017-07-21 15:54:06

标签: javascript jquery onload deferred

我有一个延迟加载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没有& #39; t下载完了,你怎么解决这个问题?我猜一个监听器/如果完成加载加载其他人等待... 提前致谢

2 个答案:

答案 0 :(得分: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);
    }
}

答案 1 :(得分:1)

在这里找到Load jQuery with JavaScript using Promises

@RunWith(MockitoJUnitRunner.class)
public class ServiceTest {