このページには、カルーセル内の画像のコレクションが表示されます。カルーセルは、 jQuery無限カルーセルプラグインによって提供されます。現在、プラグインとそれを呼び出すJSコードがに読み込まれてい<head>
ます。
カルーセルコードが開始される前に、画像自体だけを表示するスタイルなしのコンテンツのフラッシュがあります。これを防ぐために私にできることはありますか?たとえば、カロセルが初期化されるまで画像を非表示にしますか?
FOUCはIEで特に悪いですが、Firefoxでも発生します。
このページには、カルーセル内の画像のコレクションが表示されます。カルーセルは、 jQuery無限カルーセルプラグインによって提供されます。現在、プラグインとそれを呼び出すJSコードがに読み込まれてい<head>
ます。
カルーセルコードが開始される前に、画像自体だけを表示するスタイルなしのコンテンツのフラッシュがあります。これを防ぐために私にできることはありますか?たとえば、カロセルが初期化されるまで画像を非表示にしますか?
FOUCはIEで特に悪いですが、Firefoxでも発生します。
ブラウザでJavaScriptを無効にすると、「フラッシュ」がどのように表示されるかを確認できます。JSを無効にした状態で、ページが少なくとも常に「使用可能」であることを確認することをお勧めします。このcssを#carouselに追加すると、トリックが実行されます。
overflow: hidden;
width: 615px;
height: 270px;
border: 2px solid #aaa;
コンテンツのcssを設定display:none
し、カルーセルコードが開始される直前にjavascriptを使用してコンテンツを削除できます。
そして、プログレッシブエンハンスメントに固執することを忘れないでください。