0

自从谷歌上个月宣布在对网站进行排名时将考虑页面速度和加载结构以来，我已经花费了大量时间试图找到一种方法来保证 JQuery 和 Bootstrap 3 仍然可以很好地相互配合。

为了防止 css 和 javascript 页面阻塞，我编写了这段代码以确保所有内容都异步加载到站点的底部。

function loadFirst(filename, filetype) {
    if(filetype == "js") {
        var node = document.createElement('script');
        node.setAttribute("type", "text/javascript");
        node.setAttribute("async", true);
        node.setAttribute("src", filename);
    } else if(filetype == "css") {
        var node = document.createElement("link");
        node.setAttribute("rel", "stylesheet");
        node.setAttribute("type", "text/css");
        node.setAttribute("href", filename);
    }
    if(typeof node != "undefined") {
        var h = document.getElementsByTagName("head")[0];
        h.parentNode.insertBefore(node, h);
    }
}

/* Load all CSS first and JS files for your site here. */
window.addEventListener('load', function() {
    loadFirst("//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", "js");
    loadFirst("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css", "css");
    loadFirst("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js", "js");
    loadFirst("//fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese", "css");
});

但是 JQuery 在 bootstrap.min.js 测试 JQuery 之前没有机会完成加载并且失败。所以我为部分解决这个问题所做的就是注释掉：

//loadFirst("//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", "js");

并通过以下方式将其加载到 javascript 之上：

<script async src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这在大多数情况下都有效，但现在我想使用 JQuery 来帮助我自定义 Bootstrap 轮播，方法是将此代码放在 window.addEventListener 事件中以使其自动启动：

$('.carousel').carousel({
    interval: 3000,
    pause: false
})

但这会产生：

Uncaught ReferenceError: $ is not defined

在我的后续 Bootstrap 自定义代码开始运行之前，我正在努力寻找一种方法来保证 JQuery 已完全加载。如果这种代码太复杂而无法用几行代码编写，是否已经有任何库可以处理这个问题？

这是我到目前为止的工作：http: //jsfiddle.net/2g4tbe72/

4

1 回答 1

0

我建议使用脚本加载器，例如require.js。这里有一些 jQuery 特定的信息http://requirejs.org/docs/jquery.html可以帮助你。

于 2014-09-23T03:33:57.917 回答