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'
}]);