FROM CACHE - jp_header
解決済

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

mnfdann1
Shopify Partner
14 0 1
 ローディング画面について以下を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";
}
})();

 

1 件の受理された解決策

Qcoltd
Shopify Partner
1057 434 422

成功

@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)は多少、悪化してしまうものと思われます。

 

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

参考になれば幸いです。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

4件の返信4

Qcoltd
Shopify Partner
1057 434 422

成功

@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)は多少、悪化してしまうものと思われます。

 

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

参考になれば幸いです。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
mnfdann1
Shopify Partner
14 0 1

田辺様

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

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

とても助かりました。

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

mnfdann1
Shopify Partner
14 0 1

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

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

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

Qcoltd
Shopify Partner
1057 434 422

@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>

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/