JS無効でローディング画面が消えない＆フェードインが機能しない場合の対策

多くのウェブサイトで見られるローディングやフェードインのアニメーションは、JavaScriptによって動的に制御されています。

しかし、JavaScriptが何らかの理由で動作しない場合、画面がローディングのまま固まったり、フェードインアニメーションが適用された要素が永遠に非表示のままになるなど、サイトの機能が致命的に損なわれることがあります。

そんなトラブルを防ぐために、今回は、JavaScriptが無効でも正常にコンテンツを表示させるためのフォールバックについて解説します。

WordPressテーマ『SWELL』

17,600円（税込）

当ブログで使用中のテーマ「SWELL」。Webサイトのベースとしても多く利用されている投資価値No.1のテーマです。

レビュー記事はこちら購入はこちら

noscriptタグで対処

もっとも簡単なのは、JavaScriptが無効の場合にだけ実行されるnoscriptタグを、headタグ内に記述しておくことです。

以下の例では、ローダー要素（#loader）は非表示に、アニメーション要素（.js-in-view）は強制で表示させています。

<noscript>
  <style>
    #loader {
      opacity: 0;
      visibility: hidden;
    }

    .js-in-view {
      opacity: 1;
      visibility: visible;
    }
  </style>
</noscript>

JavaScriptが有効の際には無視されるので、デフォルトのスタイルを指定しておくと良いでしょう。

animationプロパティで対処

こちらはCSSのanimationプロパティで個別に対処する、少しテクニカルな方法です。

この方法は、JavaScriptは有効だけれど、通信環境が悪くうまく読み込めない場合などにも役立ちます。

ローディング画面を強制的に非表示にする

/* JSが効かない時のフォールバック（強制非表示） */
@keyframes removeLoader {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

#loader {
  animation-name: removeLoader;
  animation-fill-mode: forwards; /* 最後のキーフレームを保持 */
  animation-duration: 1s;
  animation-delay: 3s;
}

animationプロパティで、数秒の遅延後、強制的に非表示にします。

forwardsによって最後のキーフレームが保たれるので、結果としてローディング画面の非表示を継続することができます。

ローディングが長すぎる場合のフォールバックとしても有効です。

フェードインをつけた要素を強制的に表示させる

/* JSが効かない時のフォールバック（フェードイン系を強制表示） */
@keyframes visible {
  to {
    opacity: 1;
    visibility: visible;
  }
}
:not(.js-enabled) .fadeInUp {
  animation-name: visible;
  animation-fill-mode: forwards; /* 最後のキーフレームを保持 */
  animation-duration: 1s;
  animation-delay: 1s;
}

こちらも同じ理屈で、1秒後にopacity:1とvisibility:visibleを適用します。

ただし、常にこのCSSが当たると本来のフェードインアニメーションがうまくできなくなるので、JavaScriptが効いていない時を判定してスタイルを与える必要があります。

判定方法は、JavaScriptによって追加されたクラス（もしくはデータ属性）の有無で判断します。

例として、JavaScriptでjs-enabledクラスをhtml要素に追加します。

document.documentElement.classList.add('js-enabled');

このクラスが付与されていない場合は、JavaScriptが無効であると判断できるので、:not()擬似クラスを使って除外すれば、無効時のみにスタイルを反映させることができるというわけです。

/* JavaScriptが有効 */
.js-enabled .fadeInUp {

}

/* JavaScriptが無効 */
:not(.js-enabled) .fadeInUp {

}

上記は例なので、JavaScirptによって与えるクラス名（属性名）に適切に変更してください。

CSSのみでJSを判定するモダンな方法

新しい方法として、scriptingメディア特性を利用することでCSSによるJavaScriptの判定ができます。

@media (scripting: enabled) {
  /* JavaScriptが有効なときに適用されるスタイルを書く */
}

2023年に全ブラウザサポートされたばかりですが、サポートされていない場合はスタイルが無視されるだけなので、アニメーションの指定であれば積極的に使っても問題ないと思います。

MDN Web Docs

scripting – CSS: カスケーディングスタイルシート | MDN scripting は CSS のメディア特性で、 (JavaScript などの) スクリプトが利用できるかどうかを調べるために使用することができます。

JavaScript無効環境は一定数いる

広告表示されるのが嫌で無効化する人が一定数いたり、何らかの不具合でJavaScriptが効かない場合が稀にあるので、フォールバックとして最低限コンテンツは見れるようにしておいた方が良いです。

ハンバーガーメニューのJS制御は、もうJSありきとして割り切るか、フッターメニューにサイトマップを用意するのが吉かもしれません。

おすすめWEBスクール

WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ！
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。

＼ クリックしてジャンプ！ ／