ローディング画面がリロード・ページ遷移するたびに一瞬見えてしまう

[mnfdann1]

 ローディング画面について以下をjsに記述したのですが、リロードページに遷移するたびにローディングの画面がチラついてしまっています。

解決策を教えていただいたいです。

loader.liquid,loader.cssを作成して、theme.liquidに反映させています。

(function () {

const keyName = 'visited';

if (!sessionStorage.getItem(keyName)) {

sessionStorage.setItem(keyName, true);

} else {

document.getElementById("loading").style.display = "none";

}

})();

[Qcoltd · Accepted solution]

@mnfdann1 様

JavaScriptをどこに書かれているか、によるかもしれません。

例えば、script deferで読み込まれるJSファイルに記載されている場合、

deferの特性上、DOMの構築の後に、そのJSファイルに記載されたJavaScriptが実行されます。

そうしますと、即時実行関数であっても、DOM構築の瞬間にloading画面が出てしまうので、質問者様のおっしゃっているような状況になってしまうのではないかと思います。

一番簡単な解決方法は、

ページの表示速度を若干犠牲にすることになりますが、

下記のようにすることかと思います。

<div id="loading"></div>
<script>
  (function () {
    const keyName = 'visited';
    if (!sessionStorage.getItem(keyName)) {
      sessionStorage.setItem(keyName, true);
    } else {
      document.getElementById("loading").style.display = "none";
    }
  })();
</script>

もしくは、JavaScriptとCSSをもう少し改修して、

セッションストレージの値をチェックしloadingを出す出さないの判断をするまでは、

画面全体が真っ白になるようにCSSを組む、などしても解決できると思いますが、

結局ユーザーの体感速度は若干遅くなりますし、

DOM構築の時間は落ちなくても、LCP(Largest Contentful Paint)や、CLS(Cumulative Layout Shift)は多少、悪化してしまうものと思われます。

抜本的な解決方法を提示できないのですが、

参考になれば幸いです。

(キュー田辺)

[mnfdann1]

田辺様

回答ありがとうございます。

上記のコードを記述すると一瞬見えていた画像が見えなくなりました！

とても助かりました。

ありがとうございました。

[mnfdann1]

先日はご返答ありがとうございました。

こちらのコードですが、ローディング中はスクロール出来ないようにしたいのですが、どのようなコードを記述したら良いでしょうか？

何卒よろしくお願いいたします。

[Qcoltd]

@mnfdann1 様

こちらが参考になるように思いました。

https://codepen.io/atiqbd/pen/jOEbVKZ

質問者様の場合は、下記のような感じになるかと思います。

(動作検証はしておりません。)

<style>
#loading { 
  height: 100%; 
  overflow: hidden; 
} 
</style>

<div id="loading"></div>
<script>
  (function () {
    const keyName = 'visited';
    if (!sessionStorage.getItem(keyName)) {
      sessionStorage.setItem(keyName, true);
    } else {
      document.getElementById("loading").style.display = "none";
    }
  })();
</script>

ご参考まで。

(キュー田辺)