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

日本語 ディスカッション 技術的なQ＆A

Topic summary

ページのリロードや遷移時にローディング画面が一瞬チラついてしまう問題について相談されています。

原因:

  • JavaScriptがscript deferで読み込まれている場合、DOM構築後にスクリプトが実行されるため、ローディング画面が瞬間的に表示されてしまう

提案された解決策:

  • セッションストレージのチェック前にローディング画面を非表示にするコードを<head>内のマークアップに直接記述する方法が提示されました
  • この方法により、画像のチラつき問題は解決したと報告されています

追加の課題:

  • ローディング中にスクロールを無効化したいという新たな要望が出されました
  • CodePenの参考リンクが提供され、CSSでoverflow: hiddenを使用する方法が示唆されています

注意点:

  • 提案された解決策はページ表示速度を若干犠牲にする可能性があり、LCP（Largest Contentful Paint）やCLS（Cumulative Layout Shift）への影響が言及されています
Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
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”;
}
})();

2

@mnfdann1 様

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

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

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

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

一番簡単な解決方法は、

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

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

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

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

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

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

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

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

参考になれば幸いです。

(キュー田辺)

3

田辺様

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

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

とても助かりました。

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

4

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

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

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

5

@mnfdann1 様

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

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

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

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

ご参考まで。

(キュー田辺)