ローディングアニメーションは、初めて訪れるユーザーに強い印象を与えるためのものです。しかし、2回目以降はロード時間が長くなり、逆にユーザーに不満を与える可能性があります。そこで、Javascriptでブラウザのキャッシュをコントロールし、ローディングアニメーションを1回のみ表示する方法を実装します。サンプルコードを配布してますのでぜひ活用してください。実装には前回のコードを使用しますのでそちらも参考ください。

class Main {
  constructor() {
    this._loading();
  }

  _loading() {
    document.addEventListener("DOMContentLoaded", () => {
      var webStorage = function () {
        if (sessionStorage.getItem("access")) {
          /*
            2回目以降アクセス時の処理
          */
          // ここに記述します
        } else {
          /*
            初回アクセス時の処理
          */
          sessionStorage.setItem("access", "true"); // sessionStorageにデータを保存

          // ここに記述します
        }
      };
      webStorage();
    });
  }
}

new Main();

// ここに記述します
const loading = gsap.timeline();
loading
  .to(".loading", {
    // ロード時のチラつきの対策
    display: "block",
  })
  .from(
    ".js_1",
    1,
    {
      opacity: 0,
      y: 50,
    },
    2
  )
  .to(".js_1", 1, {
    delay: 0.5,
    opacity: 0,
    y: 50,
  })
  .to(".js_2", 1, {
    display: "none",
  })
  .to(".js_3", 1, {
    display: "block",
    opacity: 1,
    visibility: "visible",
    y: -10,
    delay: 1,
  });

// ここに記述します
          const mv = gsap.timeline();

          mv.to("#global-container", 1, {
            opacity: 1,
            visibility: "visible",
            display: "block",
          }).from(
            "#global-container",
            {
              y: 50,
            },
            "<"
          );

以上です。お疲れ様でした。実装はできましたでしょうか？何か疑問点やご質問がございましたらお気軽にご連絡ください。お問い合わせフォームはこちら