webentwicklung-frage-antwort-db.com.de

JavaScript - Div beim Start verstecken (laden)

Ich habe ein Div in meiner PHP-Seite, das jQuery verwendet, um es zu verbergen, sobald die Seite geladen wurde. Aber gibt es eine Möglichkeit, es vom Beginn des Ladevorgangs an zu verbergen?

Der Grund, den ich frage, ist, dass Sie für eine kurze Sekunde das div sehen können, wenn die Seite geladen wird, und es dann ausgeblendet wird, wenn die Seite vollständig geladen ist.

Es sieht unprofessionell aus.

Sie fragen sich nur, ob es einen Weg gibt, dies zu umgehen?

Vielen Dank

37
Oliver Jones

Verwenden Sie den CSS-Stil, um das div auszublenden.

#selector { display: none; }

oder benutze es wie unten,

CSS:

.hidden { display: none; }

HTML

<div id="blah" class="hidden"><!-- div content --></div>

und in jQuery

 $(function () {
     $('#blah').removeClass('hidden');
 });
76

Ich hatte das gleiche Problem.

Verwenden Sie CSS zum Ausblenden ist nicht die beste Lösung, da Benutzer ohne JS manchmal das div sehen können. Die sauberste Lösung besteht darin, das div mit JQuery auszublenden. Aber das Div ist ungefähr 0,5 Sekunden sichtbar, was problematisch ist, wenn das Div oben auf der Seite ist.

In diesen Fällen verwende ich eine Zwischenlösung ohne JQuery. Dieser funktioniert und ist sofort:

<script>document.write('<style>.js_hidden { display: none; }</style>');</script>

<div class="js_hidden">This div will be hidden for JS users, and visible for non JS users.</div>

Natürlich können Sie auch weiterhin alle gewünschten Effekte für das div hinzufügen, z. B. JQuery toggle (). Und Sie erhalten das bestmögliche Verhalten (imho):

  • für Nicht-JS-Benutzer ist das div direkt sichtbar
  • für JS-Benutzer ist das div ausgeblendet und hat einen Wechseleffekt.
7
David G

Ausschluss der CSS-Lösung. Der schnellste Weg ist, es sofort mit einem Skript auszublenden.

<div id="hideme"></div>
<script type="text/javascript">
    $("#hideme").hide();
</script>

In diesem Fall würde ich die CSS-Lösung von Vega empfehlen. Wenn Sie jedoch etwas Komplexeres benötigen (z. B. eine Animation), können Sie diesen Ansatz verwenden.

Dies hat einige Komplikationen (siehe Kommentare unten). Wenn Sie möchten, dass dieses Skript wirklich so schnell wie möglich ausgeführt wird, können Sie jQuery nicht verwenden. Verwenden Sie nur native JS, und verschieben Sie das Laden aller anderen Skripts.

7
Halcyon

Warum nicht "display: none;" hinzufügen? zum divs style Attribut? Das ist alles, was die Funktion .hide () von JQuery tut.

1
Moo

Diese Methode habe ich viel benutzt, ich bin mir nicht sicher, ob es eine sehr gute Methode ist, aber sie funktioniert gut für meine Bedürfnisse.

<html>
<head>  
    <script language="JavaScript">
    function setVisibility(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
    </script>
</head>
<body>
    <div id="HiddenStuff1" style="display:none">
    CONTENT TO HIDE 1
    </div>
    <div id="HiddenStuff2" style="display:none">
    CONTENT TO HIDE 2
    </div>
    <div id="HiddenStuff3" style="display:none">
    CONTENT TO HIDE 3
    </div>
    <input id="YOUR ID" title="HIDDEN STUFF 1" type=button name=type value='HIDDEN STUFF 1' onclick="setVisibility('HiddenStuff1', 'inline');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'none');";>
    <input id="YOUR ID" title="HIDDEN STUFF 2" type=button name=type value='HIDDEN STUFF 2' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'inline');setVisibility('HiddenStuff3', 'none');";>
    <input id="YOUR ID" title="HIDDEN STUFF 3" type=button name=type value='HIDDEN STUFF 3' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'inline');";>
</body>
</html>
1
John

Mit CSS können Sie einfach die Anzeige festlegen: keine für das Element in einer CSS-Datei oder in einem Stilattribut

#div { display:none; }
<div id="div"></div>



<div style="display:none"></div>

oder die js gleich nach dem div zu haben, ist vielleicht auch schnell genug, aber nicht so sauber

0
GillesC