Liquid、JavaScriptなどに関する質問
解決済! ベストソリューションを見る。
成功
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)は多少、悪化してしまうものと思われます。
抜本的な解決方法を提示できないのですが、
参考になれば幸いです。
(キュー田辺)
成功
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)は多少、悪化してしまうものと思われます。
抜本的な解決方法を提示できないのですが、
参考になれば幸いです。
(キュー田辺)
田辺様
回答ありがとうございます。
上記のコードを記述すると一瞬見えていた画像が見えなくなりました!
とても助かりました。
ありがとうございました。
先日はご返答ありがとうございました。
こちらのコードですが、ローディング中はスクロール出来ないようにしたいのですが、どのようなコードを記述したら良いでしょうか?
何卒よろしくお願いいたします。
こちらが参考になるように思いました。
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>
ご参考まで。
(キュー田辺)
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025