FOUC対策:ページ読み込み際に一瞬表示が崩れるのを防ぐ方法

FOUC対策

FOUC(Flash Of Unstyled Content):外部のCSSが呼ばれる前に一瞬スタイルが適用されてないページが表示される現象

トップページを表示する際に、一瞬でも崩れて見えるのはかなりストレスだったので対策方法を調べてみたら、対策方法は意外と簡単だった。

  <script>
    document.documentElement.className = 'no-fouc';
    $(document).ready(function () {
      $('.no-fouc').removeClass('no-fouc');
    })
  </script>
.no-fouc { display: none; }

これだけで、求める挙動になってくれたがテストしたページがすごく小さかったので大きめのページでも問題ないのか確認してみないと、、

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です