cssやjsをCDNからFallbackさせる方法[Bootstrap][Jquery]
サーバへのトラフィックを減らすにも有効なCDN。
でも、そのホストが落ちたときは自前のを使いたい。
そんなときはこんな風にやるみたい。
参照元がわかんなくなってしまったけど、yepnope.jsを使って実現する。
<script type="text/javascript" src="/js/yepnope-min.js"></script>
<script type="text/javascript" src="/js/load_jquery_bootstrap.js"></script>
ヘッダで下記のように宣言して下記のように読み込む。
#load_jqury_bootstrap.js
function cssLoaded(href) {
var cssFound = false;
for (var i = 0; i < document.styleSheets.length; i++) {
sheet = document.styleSheets[i];
if (sheet['href'].indexOf(href) >= 0 && sheet['cssRules'].length > 0) {
cssFound = true;
}
};
return cssFound;
}
yepnope([{
load: '//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js',
complete: function () {
if (!window.jQuery) {
alert('local jquery');
yepnope('js/jquery-1.9.0.min.js');
}
}
}, {
load: '//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js',
complete: function () {
if (!$.fn.button) { // just picked a random element from the bootstrap to test
alert('local twitter js');
yepnope('js/bootstrap.min.js');
}
}
}, {
load: '//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css'
}, {
test: cssLoaded('bootstrap-combined.min.css'),
nope: 'css/bootstrap-combined.min.css'
}]);