JavaScript ein - Ausblenden eines Div-beim starten (laden)

Ich habe ein div in meine php-Seite, jQuery verwendet, um es zu verbergen, sobald die Seite geladen wurde. Aber gibt es eine Möglichkeit, es zu verbergen, von Anfang an von loadup?

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

Sieht es unprofessionell aus.

Frage mich, ob es ist eine Möglichkeit, um dieses?

Dank

InformationsquelleAutor der Frage Oliver Jones | 2012-04-13

Verwenden von css zum ausblenden des div.

#selector { display: none; }

oder Verwenden Sie es wie unten

CSS:

.hidden { display: none; }

HTML

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

und in jQuery

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

InformationsquelleAutor der Antwort Selvakumar Arumugam

6

Ich habe das gleiche problem.

Verwendung von CSS zu verstecken ist nicht die beste Lösung, weil manchmal Sie möchten, dass Benutzer ohne JS sehen kann, die div..
Die sauberste Lösung ist das ausblenden des div mit JQuery. Aber das div-Element sichtbar etwa 0,5 seconde, das ist problematisch, wenn das div-Element auf der Oberseite der Seite.

In diesen Fällen verwende ich eine Lösung, die ohne JQuery. Der 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, Sie können noch alle Effekte, die Sie wollen auf die div, JQuery toggle() zum Beispiel.
Und erhalten Sie das beste Verhalten möglich (imho) :
- für nicht-JS-Nutzer, die div ist direkt sichtbar
- für JS Benutzer, die div ist versteckt und hat toggle-Effekt.
InformationsquelleAutor der Antwort David G
5

Abgesehen von der CSS-Lösung. Der Schnellste Weg ist, es zu verbergen, sofort mit einem Skript.
```
<div id="hideme"></div>
<script type="text/javascript">
    $("#hideme").hide();
</script>
```
In diesem Fall würde ich empfehlen die CSS-Lösung von Vega. Aber wenn Sie etwas komplexer (wie eine animation) können Sie diese Methode verwenden.

Dieser hat einige Komplikationen (siehe Kommentare unten). Wenn Sie möchten, dass dieses Stück script um wirklich so schnell wie möglich laufen können Sie nicht verwenden, jQuery, verwenden Sie das native JS nur verschieben und laden alle anderen Skripte.

InformationsquelleAutor der Antwort Halcyon
1

Warum nicht hinzufügen "display: none;" der divs style-Attribut? Das ist alles, was JQuery ist .hide () - Funktion funktioniert.

InformationsquelleAutor der Antwort Moo

Diese Methode, die ich verwendet habe, eine Menge, nicht sicher, ob es ist ein sehr guter Weg, aber es 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>

InformationsquelleAutor der Antwort John

0

Mithilfe von CSS können Sie nur einstellen, display:none, um das element in einer CSS-Datei oder in einem style-Attribut
```
#div { display:none; }
<div id="div"></div>



<div style="display:none"></div>
```
bzw. ohne js nur nach dem div-vielleicht schnell genug, aber nicht so sauber

InformationsquelleAutor der Antwort GillesC

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.