FOUCとは,読み込み時に画面がちらつく現象.CSSのスタイルが効いていない要素がCSSファイルより先に読み込まれてしまうことにより起こる.FOUCを防ぐ方法は次の3ステップが知られている.
1.
.no-fouc{display: none;}
2.
document.documentElement.className = 'no-fouc';
3.
$(document).ready(function() { $('.no-fouc').removeClass('no-fouc'); });
こうしておくと,no-fouc
クラスを取り払う(3.)ことで,表示してくれる.
しかし.それでも動作が遅いことがある.「表示しない」つまりdisplay: none;
が後で効かざるを得ないときがある.そのときは,同等のjQueryメソッドである.hide()
を使って,1.の代わりに,
1.
$('.no-fouc').hide(0);
と書く.こうすると,no-fouc
クラスの付いた要素を0ミリ秒で隠してくれる..hide()
にはslow
などの速度表現のほかに時間も数字で指定できる.ここを突いた方法である.