• HOME
  • 初回限定表示のローディングのちらつきについて
TomoyaOkada

初回限定表示のローディングのちらつきについて

記事をシェアする

こんにちは。okadaです。
ローディング画面やオープニングアニメーションで初回表示のみで2回目以降は非表示にする対応があると思います。

初回のみ表示の処理は比較的に簡単なのですが、2回目以降の非表示の際にページ遷移の時、若干のちらつきがでてしまうので
こちらをなんとか解決したいなと思いました。

割と強引な手段な気がするので最適解ではないです。
一応備忘録として残します。


初回のみ表示処理

sessionStorageを使って実装します。

  const sessionKey = "key";
  const sessionValue = true;
  if (!sessionStorage.getItem(sessionKey)) {
    sessionStorage.setItem(sessionKey, sessionValue);
  }




ページ遷移時のちらつきを防止

sessionStorageのif文で2回目以降の時には対象の要素に非表示のスタイルを適用させればよいのですが、
こちらで行うと読み込みの関係で若干ちらついてしまいます。

なので、2回目以降はheadタグ内に非表示用の新たなスタイルシートを追加する方法にしました。

  <script>
  const sessionKey = "accesed";
  const sessionValue = true;

  if (!sessionStorage.getItem(sessionKey)) {
    sessionStorage.setItem(sessionKey, sessionValue);
  } else {
    const link = document.createElement('link')
    const head = document.querySelector('head')
    link.setAttribute('rel', 'stylesheet')
    link.setAttribute('href', '<?php echo esc_url(get_template_directory_uri()); ?>/dist/css/animation-hide.css')
    head.append(link)
  }
  </script>


上記をheadタグ内に入れる感じですね。
一応こちらで2回目以降のページ遷移時に非表示にしたい要素のちらつきはなくなりました。

ご参考までに試してみてください、!


記事をシェアする