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

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

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

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

WordPressテーマ『SWELL』

17,600円（税込）

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

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

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

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

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

animationプロパティで、数秒の遅延後にopacity:0とvisibility:hiddenを適用します。

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を適用します。

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

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

例えば、以下のコードでHTMLにjs-enabledクラスを付与するようにします。

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

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

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

}

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

}

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万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。

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