jQuery / JavaScriptが無効の環境でも表示を保証するには

投稿者: Anonymous

実際に動かしたい内容としてはjQuery / JavaScriptで、ロード画面を表示させたいとほぼ同じで、以下のことを行いたいのですが、

  1. HTML読み込み完了後まで要素を非表示
  2. 完了後にアニメーションとともに要素を表示する

要素にclassでdisplay: none;を付けた状態にしておき、読み込み完了後にjQueryのtoggleClassで外して表示するという方法で目的を達成することができます。
ですが、この場合の問題点としてJavaScriptが無効の時に読み込みが完了しても要素が表示されないという点が上げられます。

なるべくCSSでのアニメーションに依存(しなくてもOK)しながらJavaScriptが使用できない環境でも表示を保証するにはどうしたら良いのでしょうか。


追記:

<noscript>を使って以下の様なコードで表示は保証されますが、この場合記述量が2倍近くに膨れ上がり、またSEO的にも悪いのでこのような方法を避けたいです。

<div id="wrapper" class="is-hidden">
  <h1>TEST</h1>
  <p>messege</p>
</div>
<noscript>
  <div id="wrapper">
    <h1>TEST</h1>
    <p>messege</p>
  </div>
</noscript>

実際に動かしたいアニメーションの例:

実際に動かしたいアニメーションの例

_x000D_

_x000D_

$(window).load(function() {_x000D_
        $("#wrapper").toggleClass("is-hidden animated fadeInDown");_x000D_
      });

_x000D_

.is-hidden {_x000D_
      display: none;_x000D_
    }_x000D_
_x000D_
/* Animate.css */_x000D_
.animated {_x000D_
  -webkit-animation-duration: 1s;_x000D_
          animation-duration: 1s;_x000D_
  -webkit-animation-fill-mode: both;_x000D_
          animation-fill-mode: both;_x000D_
}_x000D_
@-webkit-keyframes fadeInDown {_x000D_
  0% {_x000D_
    opacity: 0;_x000D_
    -webkit-transform: translate3d(0, -100%, 0);_x000D_
            transform: translate3d(0, -100%, 0);_x000D_
  }_x000D_
_x000D_
  100% {_x000D_
    opacity: 1;_x000D_
    -webkit-transform: none;_x000D_
            transform: none;_x000D_
  }_x000D_
}_x000D_
_x000D_
@keyframes fadeInDown {_x000D_
  0% {_x000D_
    opacity: 0;_x000D_
    -webkit-transform: translate3d(0, -100%, 0);_x000D_
            transform: translate3d(0, -100%, 0);_x000D_
  }_x000D_
_x000D_
  100% {_x000D_
    opacity: 1;_x000D_
    -webkit-transform: none;_x000D_
            transform: none;_x000D_
  }_x000D_
}_x000D_
_x000D_
.fadeInDown {_x000D_
  -webkit-animation-name: fadeInDown;_x000D_
          animation-name: fadeInDown;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="wrapper" class="is-hidden">_x000D_
  <h1>TEST</h1>_x000D_
  <p>messege</p>_x000D_
</div>

_x000D_

_x000D_

_x000D_

解決

_x000D_

_x000D_

シンプルにこれだけで良くない?_x000D_
_x000D_
 <style> /* デフォルトは非表示 */_x000D_
  .test { display: none;}_x000D_
 </style>_x000D_
_x000D_
 <noscript>_x000D_
  <style> /* cssでは呼び出し方法とセレクターが同じであれば後から読み込まれた方が有効になる */_x000D_
   .test { display: block;}_x000D_
  </style>_x000D_
 </noscript>_x000D_
_x000D_
 <div class="test" >_x000D_
  TEST_x000D_
 </div>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *