7

CDNまたは外部サーバーからCSS/JSファイルをロードする場合、外部障害が原因でファイルを見逃す可能性があります（確率が低い場合でも）。この場合、適切なCSSとJSがないと、htmlページが破損します。

CDNに障害が発生したときにローカルバージョンを読み込むための実用的なアプローチはありますか？

<link rel="stylesheet" href="http://cdn.com/style.css" type="text/css" />
IF (not loaded style.css){
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
}

JS関数（JSファイルで提供）をテストできるため、JSでこれを行う方が簡単です。次に、失敗時にローカルファイルをロードします。たとえば、jQueryライブラリが利用可能かどうかをテストします。

しかし、これに実用的な方法があるかどうか知りたいです！

4

2 に答える 2

5

私はこのようにします。

スタイルシート内にクラスを作成してui-helper-hiddenから、ページの最初の要素としてdivを追加します。

<body><div class="ui-helper-hidden"></div><!-- rest of html --></body>

CDN javascriptファイルがロードされていることを確認した後、このコードを使用してください。私はjqueryを使用しています。

<script>
    // CSS Fallback
    $(function () {
        if ($('.ui-helper-hidden:first').is(':visible') === true) {
            $('<link rel="stylesheet" type="text/css" href="/pathtocss/nameofstylesheet.css" />').appendTo('head');
        }
    });
</script>

これにより、非表示にする必要のある要素が存在するかどうかが確認されます。非表示になっていない場合は、cssファイルがCDNからロードされていないことがわかります。

CDNを介してjQueryとjQueryUIにこのメソッドを使用します

于 2012-05-21T15:52:45.843 に答える
1

Javascriptの場合、動的スクリプトを作成するときにonloadとイベントをリッスンできます。onerrorただし、それらの同じページでは、CSSの場合は別の方法で表示されます。

CSSを動的にロードする唯一の信頼できる方法は、AJAXを介してロードすることです。動的リンクタグを介してスタイルをロードすることはできますが、これらのイベントがないと、スタイルがロードされているかどうかはわかりません。スタイルをポーリングすることもできますが、それはハックなIMOです。

これを行う別の方法は、サーバーにそれらのCDNファイルを読み取らせることです。よろしければ、リンクのURLを印刷してください。ただし、これらのリンクが無効になっている場合は、代わりにローカルURLを出力するようにしてください。これはより信頼性が高く、ロジックをサーバーにオフロードします。これは、サーバーにアクセスできることを前提としています。

または、そもそもローカルバージョンを使用することをお勧めします。優れたキャッシュがあれば、帯域幅は問題になりません

于 2012-05-21T15:47:29.393 に答える