画面遷移時・ページ読み込み時に一瞬表示が崩れるのを防ぐ方法

サイトを開いた時、ページ読み込み時に一瞬表示が崩れたり、アニメーションがチラつくことありませんか？

「一瞬だから別に良くね？」

と思ったらダメです。

画面遷移時・ページ読み込み時に一瞬表示が崩れる理由

以下の理由から一瞬表示が崩れるorチラつく場合があります。

• CSSとJavascriptの読み込みにちょっと時差がある
• transform, animation, transitionを組み合わせいる場合
• position: fixedを指定している場合に、displayで表示・非表示を切り替えていて、子孫要素にtransitionを使っている場合

私の場合は、ヘッダーとかで画面遷移時に一瞬だけアニメーションがチラつくことがよくありました。

画面遷移時・ページ読み込み時に一瞬表示が崩れるのを防ぐ方法

解決方法としては、一瞬表示が崩れる要素をCSSで非表示にしておいて、jQueryでフェードインさせます。

※jQueryの読み込みなどは省略

#header {
  display: none;
}

$(function() {
    $('#header').fadeIn(0);
});

これで、画面遷移時・ページ読み込み時に一瞬表示が崩れるのを防ぐことができます。