2357


実際に動かしたい内容としては[jQuery /
JavaScriptで、ロード画面を表示させたい](https://ja.stackoverflow.com/questions/510/jquery-
javascript%E3%81%A7-%E3%83%AD%E3%83%BC%E3%83%89%E7%94%BB%E9%9D%A2%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%81%9F%E3%81%84)とほぼ同じで、以下のことを行いたいのですが、

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

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

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

* * *

**追記:**

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

[code]

    <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>
    
[/code]

* * *

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

![実際に動かしたいアニメーションの例](https://i.stack.imgur.com/YZDuc.gif)

[code]

    $(window).load(function() {
            $("#wrapper").toggleClass("is-hidden animated fadeInDown");
          });
[/code]

[code]

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

[code]

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


CC BY-SA 3.0
2014-12-21T11:49:04.600
2324
2014-12-22T03:58:41.433
2017-04-13T12:52:39.113
-1
4960
question
javascript jquery
jQuery / JavaScriptが無効の環境でも表示を保証するには


JSが有効の時にだけ有効になるCSSを使えばいいと思います。

まず、`<html>`たぐに`no-js`のクラスを加えます。

[code]

    <html class="no-js">
    
[/code]

そして、`head`の中にそのクラスを外すJSを入れます（外部.jsファイルに入れても可）。

[code]

    <script>
        var htmlEl = document.documentElement;
        htmlEl.className = htmlEl.className.replace("no-js", "js");
    </script>
    
[/code]

そうすれば、JS無効/有効別のCSSが使えます。

[code]

    <style>
        .js is-hidden {
            display: none;
        }
    </style>
    
[/code]


CC BY-SA 3.0
2014-12-21T12:58:18.163
2329
2014-12-21T13:13:24.380
2014-12-21T13:13:24.380
4788
4788
2324
answer


いろいろやり方はあると思いますけど、その方向性だと、まず `<noscript>` を普通に記述して、その後 JS を使って、 `<noscript>`
を剥ぎ取ってやればよいです。

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <noscript>
      <h1>TEST</h1>
      <p>messege</p>
    </noscript>
    
    <script type="text/javascript">
        $('noscript').replaceWith(function() {return this.textContent || this.innerText;});
    </script>
[/code]

追記: Googleクローラ から見ると、上記のページは以下のように見えます。

![画像の説明をここに入力](https://i.stack.imgur.com/7kDx6.png)


CC BY-SA 3.0
2014-12-21T13:06:15.850
2330
2014-12-21T15:35:26.857
2014-12-21T15:35:26.857
4978
4978
2324
answer

[code]

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


CC BY-SA 3.0
2014-12-22T03:39:19.480
2357
2014-12-22T03:58:41.433
2014-12-22T03:58:41.433
5479
5479
2324
answer