Google が先月、Web サイトをランキングする際にページの速度と読み込み構造を考慮すると発表して以来、私はかなりの時間を費やして、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>
これはほとんどの場合機能しますが、次のコードを window.addEventListener イベント内に配置して自動起動させることで、JQuery を使用して Bootstrap カルーセルをカスタマイズしたいと考えています。
$('.carousel').carousel({
interval: 3000,
pause: false
})
しかし、それは生成します:
Uncaught ReferenceError: $ is not defined
そして、後続の Bootstrap カスタム コードが実行を開始する前に、JQuery が完全に読み込まれることを保証する方法を見つけようとしています。この種のコードが複雑すぎて数行のコードで記述できない場合、この問題を処理するライブラリは既にありますか?
これが私がソファーで働いているものです: http://jsfiddle.net/2g4tbe72/