MENU
WEB制作の備忘録 | ぶろぐみ
お問い合わせ
　
  1. ホーム
  2. WEB制作
  3. JS無効でローディング画面が消えない＆フェードインが機能しない場合の対策

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

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

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

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

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

目次

noscriptタグで対処

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

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

<!-- JS無効時のみ適用 -->
<noscript>
  <style>
    #loader {
      opacity: 0;
      visibility: hidden;
    }

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

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

外部スタイルシートにして、headタグ内に記載してもOKです。

<head>
  <!-- JS無効時のみ適用 -->
  <noscript>
    <link rel="stylesheet" href="noscript.css">
  </noscript>
</head>

animationプロパティで対処

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

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

ローディングの場合

ローディング画面を、3秒後に強制的にフェードアウトさせる例です。

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

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

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

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

フェードイン系の場合

こちらも同じ理屈で、1秒後にフェードインさせる例です。

/* 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;
}

ただし、常にこの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によって与えるクラス名（属性名）に適切に変更してください。

scriptingメディア特性で対処

モダンブラウザであれば、scriptingメディア特性を利用することでCSSによるJavaScriptの判定ができます。

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

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

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

JavaScript無効環境は一定数いる

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

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

カスタマイズに困ったらお気軽にご相談を！

  • 「ちょっとしたCSSの調整だけお願いしたい」
  • 「不具合を直してほしい」

料金は3,000円〜、お支払いは銀行振込・Amazonギフトカードなど柔軟に対応してます🤔

今すぐ相談する
WEB制作
CSS
役に立ったら他の方にシェア

お気軽にコメントどうぞ

コメントする

目次