非構造化コンテンツのフラッシュを削除する（FOUC）

This pageは、カルーセルの画像のコレクションを示しています。カルーセルはjQuery infinite carousel pluginによって提供されています。現在、プラグインとそれを呼び出すJSコードは<head>にロードされています。非構造化コンテンツのフラッシュを削除する（FOUC）

カルーセルコードが表示される前に、画像そのものだけを表示するスタイルのないコンテンツが点滅します。これを防ぐためにできることはありますか？ caroselが初期化されるまでイメージを非表示にしますか？

FOUCはIEでは特に悪いですが、Firefoxでも発生します。

2012-02-17 Dónal

ブラウザでjavascriptを無効にすると、「フラッシュ」の外観がわかります。 JSを無効にした状態で、ページが少なくとも常に「使用可能」であることを確認することをお勧めします。 #carouselにこのCSSを追加すると、このトリックが実行されます：

overflow: hidden; 
width: 615px; 
height: 270px; 
border: 2px solid #aaa;

2012-02-17 14:49:28

あなたは、コンテンツのCSSにdisplay:noneを設定し、その後にだけカルーセルコードキックの前にJavaScriptを使用して、それを削除してください。

そしてProgressive enhancementに固執することを忘れないでくださいことができます。

2012-02-17 14:24:30

これは本当にプログレッシブなエンハンスではないのでしょうか？ 'display：none'でスタイルを設定し、何らかの理由でユーザーがjsを無効にすると、何も表示されません。 'js-on'クラスのようなテクニックを使うと、カルーセルが作成されるまでコンテンツを隠すことができます。 – Luca

答えて