jQuery, jQueryUI, Bootstrap利用時のCDNフォールバック対応 

コンテンツデリバリーネットワーク(CDN)を利用した、jQueryやjQuery UI、BootstrapのJavaScriptファイルやCSSファイルの読み込みが失敗した際のフォールバックの方法は以下の通りです。


<!-- JQueryの読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="venders/jquery/2_1_1/jquery-2.1.1.min.js"><\/script>');</script>

<!-- JQuery UI(.css)の読み込み -->
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<div class="ui-helper-hidden"></div>
<script>
    // jQuery UI CSS Fallback
    $(function () {
        if ($('.ui-helper-hidden:first').is(':visible') === true) {
            $('<link rel="stylesheet" type="text/css" href="venders/jquery_ui/1_11_2/jquery-ui.min.css" />').appendTo('head');
        }
    });
</script>

<!-- JQuery UI(.js)の読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="venders/jquery_ui/1_11_2/jquery-ui.min.js"><\/script>')</script>

<!-- Bootstrap(.css)の読み込み -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script>
    // Bootstrap CSS Fallback
    $(function () {
        if ($('body').css('color') !== 'rgb(51, 51, 51)') {
            $('<link rel="stylesheet" type="text/css" href="venders/bootstrap/3_3_0/css/bootstrap.min.css" />').appendTo('head');
        }
    });
</script>

<!-- Bootstrap(.js)の読み込み -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script>$.fn.modal || document.write('<script src="venders/bootstrap/3_3_0/js/bootstrap.min.js"><\/script>')</script>

Read More