ページ読み込み時に一瞬表示が崩れるのを防ぐ方法
こんばんは、福田です。
最近寒すぎですね、もう雪は年一くらいで冬を感じさせてくれれば十分です。
さてっ
サイトを開いた時、ページ読み込み時に一瞬表示が崩れる時ってありますよね。
「一瞬だから気にしなくていいじゃん」
って言ってしまえばそうなんですが、
クライアントによっては突っ込まれます。。。
これはどうやら
CSSとJavascriptの読み込みに僅かに時差があるからですね。
そこで、一瞬表示が崩れる要素をCSSで非表示にしておいて、
scriptでフェードインさせるという手を使います。
■CSS
|
1 2 3 |
#drawer-navigation{ display:none; } |
■script
|
1 2 3 4 5 |
<script type="text/javascript"> $(window).load(function() { $('#drawer-navigation').fadeIn(0); }); </script> |
これで一瞬表示が崩れるのを防げます！