web-dev-qa-db-de.com

Wie verstecke ich Elemente mit jQuery, bevor sie gerendert werden?

Ich möchte ein HTML-Layout mit Bereichen (divs, spans) erzeugen, die bedingt ein-/ausgeblendet werden können. Diese Bereiche sind standardmäßig ausgeblendet.

Wenn ich die Methode .hide () mit jquery auf document.ready aufrufe, können diese Bereiche blinken (Browser rendern teilweise geladene Dokumente). Also wende ich den Stil "display: none" im HTML-Layout an.

Ich frage mich, was die beste Methode ist, um ein Blinken zu vermeiden, da das Anwenden von "display: none" die Verkapselungsregel verletzt - ich weiß, was jquery mit hide/show macht und es verwendet. Wenn sich die Implementierung von jquery eines Tages ändert, kann die gesamte Site nicht mehr ausgeführt werden.

Danke im Voraus

44
Andrew Florko

Es ist absolut nichts Falsches daran, eine anfängliche Anzeigeeigenschaft eines Elements festzulegen, insbesondere wenn Sie es in einer CSS-Klasse einkapseln.

3
James H

@ Andrew,

Ich weiß, dass die Antwort bereits akzeptiert wurde, aber mit display: none; wird ein Albtraum für Benutzer ohne Javascript.

Mit Inline-Javascript können Sie ein Element ausblenden, ohne dass es jemals blinkt. Benutzer ohne Javascript können es weiterhin sehen.

Betrachten Sie einige Divs, die beim Laden der Seite ausgeblendet werden sollten.

<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>

Das Inline-Javascript wird ausgeführt, sobald das Element gerendert wurde, wodurch es für den Benutzer ausgeblendet wird.

33
Marko

Ich stimme Boris Guéry zu, dass es sich nicht um eine Überentwicklung handelt, sondern um eine bewährte Standardpraxis. Ich würde einen etwas anderen Weg gehen als Boris, indem ich dem HTML zunächst eine no-js-Klasse hinzufüge und sie dann mit JavaScript entferne.

Auf diese Weise warten Sie nicht darauf, dass das Dokument zum Ausblenden des Inhalts bereit ist, und ohne JavaScript wird der Inhalt weiterhin angezeigt. Vorausgesetzt, der Benutzer hat kein JavaScript, entspricht dies eher der Philosophie der progressiven Verbesserung.

ex:

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

mein CSS:

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

und Javascript

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

********* OR auf Einzelfallbasis ***********

ex:

<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

Normalerweise lege ich eine .js-Klasse für mein Element fest, um die richtige Eigenschaft festzulegen, wenn Javascript aktiviert ist.

Ich kann dann das CSS abhängig davon einstellen, ob Javascript vorhanden ist oder nicht.

ex:

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

mein CSS:

html.js #foo
{
    display: none;
}

und Javascript

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

Warum nicht einfach so ?:

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

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

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

Es scheint gut zu funktionieren!

Grüße.

3
Andy

Ich hatte auch damit zu kämpfen, insbesondere im Internet Explorer, und fand dies sehr hilfreich: http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending -auf-ob-Javascript-Unterstützung-verfügbar ist /

3
tester testers

sie können "display: none" in einer CSS-Klasse anwenden.

Denn die Reihenfolge, in der ein Browser HTML-Code lesen muss, damit das JavaScript das Element findet. Sie müssen das Element als ausgeblendet markieren, während der Browser Ihren HTML-Code liest.

Sie können das HTML aber auch in Ihr JavaScript einfügen und hide aufrufen, bevor es gerendert wird.

1
Darkerstar

Ich würde immer Modernizr.js http://modernizr.com/ verwenden, um damit umzugehen.

Mit Mondernizr wird dem HTML-Tag Ihrer Seite eine Klasse 'js' oder 'no-js' hinzugefügt.

Von hier aus können Sie Ihre Elemente nur ausblenden, wenn das HTML-Tag die Klasse js hat.

Modernizr eignet sich hervorragend für so viele andere Anwendungen und ist einen Blick wert, wenn Sie es noch nicht verwendet haben: http://modernizr.com/docs/

0
Jimbo Jones

Was ich immer mache, ist ein leeres Div zu erstellen. Und wenn einige Daten in dieser Komponente angezeigt werden müssen, lade ich asynchron Daten (d. Html) mit $ .ajax () hinein.

Keine Notwendigkeit für eine zusätzliche Bibliothek.

0
Coen Damen

Das ist mein Vorschlag. Es verwendet diese Lösung , um eine neue CSS-Regel zu erstellen . Die Hauptsache: Eine CSS-Klasse, die etwas HTML verbirgt, wird erstellt, wenn JS verfügbar ist, andernfalls nicht. Und dies geschieht , bevor der Hauptinhalt (mit den HTML-Teilen, die anfangs ausgeblendet werden sollen) verarbeitet wird!

<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>

Ein bisschen komplizierter, aber ich denke, das ist eine richtige Lösung. Der Vorteil ist, dass Flackern verhindert wird und dass es funktioniert, wenn JS nicht aktiviert ist. Und es erfordert keine jQuery.

0
robsch

Nach einiger Zeit des Denkens habe ich die Idee zu der folgenden Lösung. Im Vergleich zu meiner andere Lösung habe ich sie auf das Wesentliche reduziert (und diese verwendet, um eine Klasse von JS hinzuzufügen):

<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>

Das Script-Tag wird sofort ausgeführt und fügt einem Container eine Klasse hinzu. In diesem Container gibt es einige verschachtelte Elemente, die jetzt ausgeblendet werden, da der Container die spezielle Klasse hat und es eine CSS-Regel gibt, die jetzt Auswirkungen hat.

Dies geschieht erneut, bevor der verbleibende HTML-Code verarbeitet wird (verhindert das Blinken). Wenn JS deaktiviert ist, sind standardmäßig alle Elemente sichtbar - was als progressive Verbesserung bezeichnet werden kann.

Ich bin mir nicht sicher, ob dies in jedem Browser funktioniert. Aber IMO wäre es eine einfache und ordentliche Lösung.

0
robsch

Es gibt viele Antworten. Sie können die show () -Methode verwenden und die Bedingung zum Anzeigen oder Ausblenden codieren. Hier ist der Beispielcode show_hide, wenn das Rendern abgeschlossen ist

  <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