web-dev-qa-db-ja.com

レンダリングされる前にjQueryで要素を非表示にする方法は？

条件付きで表示/非表示できる領域（div、span）を含むhtmlレイアウトを生成したい。これらの領域はデフォルトで非表示になっています。

Document.readyのjqueryで.hide（）メソッドを呼び出すと、これらの領域が点滅する場合があります（ブラウザは部分的に読み込まれたドキュメントをレンダリングします）。したがって、HTMLレイアウトに「display：none」スタイルを適用します。

"display：none"を適用するとカプセル化ルールが破られるため、まばたきを避けるためのベストプラクティスは何でしょうか。jqueryがhide/showを使用してそれを使用することを知っています。 jqueryの非表示/表示の実装がいつか変わると、サイト全体が機能しなくなります。

前もって感謝します

jqueryhtmlhidden
44
Andrew Florko

特にcssクラスにカプセル化する場合、要素の初期表示プロパティを設定することにはまったく問題はありません。

3
James H

@アンドリュー、

答えはすでに受け入れられていますが、display: none;は、JavaScriptを使用しないユーザーにとっては悪夢です。

インラインJavascriptを使用すると、点滅することなく要素を非表示にできます。 Javascriptを使用していないユーザーは引き続き表示できます。

ページが読み込まれたときに非表示にする必要があるいくつかのdivを検討します。

<head>
    <script type="text/javascript" src="jQuery.js"></script>
</head>
<body>
    <div id="hide-me">
        ... some content ...
    </div>
    <script type="text/javascript">
        $("#hide-me").hide();
    </script>

    <div id="hide-me-too">
        ... some content ...
    </div>
    <script type="text/javascript">
        $("#hide-me-too").hide();
    </script>
</body>

インラインJavascriptは、要素がレンダリングされるとすぐに実行されるため、ユーザーから隠されます。

33
Marko

ボリス・ゲリーは、過剰なエンジニアリングではなく、標準的なベストプラクティスであることに同意します。最初にhtmlにno-jsクラスを追加してからJavaScriptで削除するという、Borisとは少し異なる方法を使用します。

これにより、ドキュメントがコンテンツを非表示にする準備が整うのを待たずに、JavaScriptがなくてもコンテンツが表示されます。ユーザーがJavaScriptを使用していないと仮定すると、プログレッシブエンハンスメントの哲学に沿ったものになります。

例：

<html class="no-js">
<body>
<div id="foo"></div>
</body>
</html>

私のCSS：

#foo {
    display: none;
}
html.no-js #foo {
    display: block;
}

とjavascript

$(document).ready(
   function()
   {
     $('html').removeClass('no-js');
   }
);

********* ORケースごとに***********

例：

<div class="no-js" id="foo">foobar and stuff</div>

css：

.no-js {
  display:none;
}
#foo {
  display: block;
}
#foo.no-js {
  display: none;
}

js：

$(document).ready(function(){
  // remove the class from any element that has it.
  $('.no-js').removeClass('no-js');
});
6
Ryan Ore

通常、JavaScriptが有効になっているときに適切なプロパティを設定するために、.jsクラスを要素に設定します。

その後、JavaScriptが存在するかどうかに応じてCSSを設定できます。

例：

<html class="js">
<body>
<div id="foo"></div>
</body>
</html>

私のCSS：

html.js #foo
{
    display: none;
}

とjavascript

$(document).ready(
   function()
   {
     $(html).addClass('js');
   }
);
4
Boris Guéry

なぜこれをやらないのですか？：

// Hide HTML element ASAP
$('html').hide();

// DOM-ready function
$(function () {
   // Do stuff with the DOM, if needed
   // ...

   // Show HTML element
   $('html').show();
}

それはうまくいくようです！

よろしく。

3
Andy

私もこれに苦労しました。特にIEでは、これが非常に役立つことがわかりました。 http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending -on-whether-javascript-support-is-available /

3
tester testers

cSSクラスに「display：none」を適用できます。

JavaScriptが要素を見つけるために、ブラウザがHTMLコードを読み取る必要があるためです。ブラウザーがHTMLを読み取るため、要素を非表示にする必要があります。

JavaScriptにHTMLを挿入することもできますが、レンダリングする前にhideを呼び出すことができます。

1
Darkerstar

これを処理するには、常にModernizr.js http://modernizr.com/ を使用します。

Mondernizrでは、クラスの「js」または「no-js」がページのHTMLタグに追加されます。

ここから、htmlタグにjsクラスがある場合にのみ要素を非表示にできます。

Modernizrは、他の多くのアプリケーションに最適であり、以前に使用したことがない場合は、読む価値があります。 http://modernizr.com/docs/

0
Jimbo Jones

私がいつもしていることは、空のdivを作成することです。そして、そのコンポーネント内のデータを表示する必要がある場合、$。ajax（）を使用して非同期的にデータ（つまりhtml）をロードします。

追加のライブラリは必要ありません。

0
Coen Damen

これは私の提案です。 このソリューション からcreate新しいCSSルールを利用します。主なもの：JSが使用可能な場合はHTMLを非表示にするCSSクラスが作成され、そうでない場合は作成されます。そして、これはbeforeの前に発生します（最初に隠されるべきhtml部分を含む）メインコンテンツが処理されます！

<html>
<head>
    <style>
        /* This class gets overwritten if JS is enabled. If a css file (bootstrap, ...) 
        gets loaded with such a class this would be also overwritten. This solution does 
        not require the class. It is here just to show that it has no effect 
        if JS is activated.*/
        .hidden {
            display: block;
            background: red;
        }
    </style>
    <script>
        // this is copied from the linked stackoverflow reply:
        function setStyle(cssText) {
            var sheet  = document.createElement('style');
            sheet.type = 'text/css';
            /* Optional */
            window.customSheet = sheet;
            (document.head || document.getElementsByTagName('head')[0]).appendChild(sheet);
            return (setStyle = function (cssText, node) {
                if (!node || node.parentNode !== sheet)
                    return sheet.appendChild(document.createTextNode(cssText));
                node.nodeValue = cssText;
                return node;
            })(cssText);
        }

        // And now: This class only gets defined if JS is enabled. Otherwise 
        // it will not be created/overwritten.
        setStyle('.hidden { display: none; }');

        // Attention: Now that the class is defined it could be overwritten 
        // in other CSS declarations (in style tags or with loaded CSS files).
    </script>
</head>
<body>

    <button>Show/Hide</button>

    <div class="">before</div>
    <div class="my-element hidden">
        Content that should be initially hidden if possible.
        You may want to multiply this div by some thousands
        so that you see the effect. With and without JS enabled.
    </div>
    <div class="">after</div>

    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script>
        // Here is some 'normal' JS code. Very likely loaded as a JS file:
        $('button').click(function () {
            $('.my-element').toggleClass('hidden');
            // or setting display directly: 
            //   $('.my-element').toggle() 
            // but well, having class hidden though it is not 
            // hidden makes is not so Nice...
        })
    </script>

</body>
</html>

もう少し複雑ですが、これは適切な解決策だと思います。利点は、ちらつきが防止され、JSが有効になっていなくても動作することです。また、jQueryは必要ありません。

0
robsch

しばらく考えた後、次の解決策のアイデアを思いつきました。私の 他のソリューション と比較して、私はそれを本質的な部分に減らしました（そしてJSを使用してクラスを追加するために this を使用しました）：

<html>
<head>
    <style>
        /* This could be also part of an css file: */
        .container-with-hidden-elements .element {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <script>
            document.getElementsByClassName('container')[0]
                    .className += ' container-with-hidden-elements';
        </script>

        <div class="element">Content that should be initially hidden if possible.</div>
    </div>
</body>
</html>

スクリプトタグはすぐに実行され、クラスをコンテナに追加します。このコンテナ内には、コンテナに特別なクラスがあり、CSSルールが有効になっているため、隠されたいくつかのネストされた要素があります。

繰り返しますが、これは残りのhtmlが処理される前に発生します（点滅を防ぎます）。また、JSが無効になっている場合、すべての要素はデフォルトで目に見えるように表示されます。これは、 プログレッシブエンハンスメント と呼ばれることもあります。

これがすべてのブラウザで機能するかどうかはわかりません。しかし、IMOはシンプルできれいなソリューションになります。

0
robsch

多くの答えがあります。show（）メソッドを使用して、表示または非表示の条件をコーディングできます。サンプルコードは次のとおりです レンダリングが完了したらshow_hide

  <div id="banner-message">
  <p id="hello">Hello World!!!!!</p>
  <input id="statusconf" value="" type="checkbox">Show hello world text when i click this check box
  <button>Change color</button>
</div>

    // find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})

//Set this up as part of document ready if you wish
//$(document).ready(function(e) {

    $("#statusconf").show(function(e) {
            if ($("#statusconf").is(':checked') === false) {
                $('#hello').hide();
            } else {
        $("#hello").show();
      }
  });

    $("#statusconf").on("click", function(e) {
    if ($("#statusconf").is(':checked') === false) {
                $('#hello').hide();
            } else {
        $("#hello").show();
      }
  });

//});
0
webjockey