Wie verstecke ich ein HTML-Element vor dem Laden der Seite

Ich habe einige JQuery-Code, der ein div zeigt oder verbirgt.Wie verstecke ich ein HTML-Element vor dem Laden der Seite

$("div#extraControls").show(); // OR .hide()

Ich möchte zunächst die div nicht sichtbar sein, so habe ich:

$(document).ready(function() { 
    $("div#extraControls").hide(); 
});

jedoch auf dem Browser, die Inhaltslasten sichtbar für eine Sekunde, bevor er verschwand, das nicht das, was ich will.

Wie lege ich das Element vor dem Laden der Seite verstecken, während die Fähigkeit zu zeigen, verstecken Sie es dynamisch mit einem Skript?

Quelle

2010-06-01 Robert

div.hidden 
{ 
    display: none 
} 

<div id="extraControls" class="hidden"> 
</div> 

$(document).ready(function() { 
    $("div#extraControls").removeClass("hidden"); 
});

Quelle

2010-06-01 15:33:09

+1 Eine Sache, die zu beachten ist, wenn der Benutzer JavaScript deaktiviert Im Browser bleibt die ganze Seite verborgen. –

Aus meiner Erfahrung werden einige Browser keine Medien (zB Bilder) in Elemente laden, die mit 'display: none' oder' opacity: 0' ausgeblendet sind. Ich würde stattdessen empfehlen, 'visibility: hidden' zu verwenden. – mqchen

@ mq.chen Danke für die Warnung, aber das Sichtbarkeits-Tag erlaubt es nicht, den Inhalt mit dem Befehl .hide() umzuschalten. – Robert

In CSS:

#extraControls { display: none; }

Oder in HTML:

<div id="extraControls" style="display: none;"></div>

Quelle

2010-06-01 15:32:39 Caleb

Was könnten Sie tun, ist am Ende des Dokuments ein Inline-script Tag eingefügt, oder unmittelbar nach dem div mit der ID "extraControls". Sollte ein bisschen früher als.

<div id="extraControls">i want to be invisible!</div> 
<script type="text/javascript">$("div#extraControls").hide()</script>

Natürlich können Sie auch diese Server-Seite tun könnten, aber vielleicht gibt es einen guten Grund, die Sie nicht wollen, das zu tun (wie haben die Kontrollen sichtbar, wenn der Browser unterstützt kein JavaScript).

Quelle

2010-06-01 15:33:56 CharlesLeaf

Machen Sie eine CSS-Klasse

.hidden { 
display: none; 
}

hinzufügen Zu jedem Element, das Sie wollen nicht sichtbar sein, wenn die Seite geladen wird. Verwenden Sie dann , um es erneut anzuzeigen.

Quelle

2010-06-01 15:37:49 OMGKurtNilsen

#toggleMe //Keep this in your .css file 
{ 
display:none; 
visibility:inherit; 
background-color:#d2d8c9;  
} 


<a href="#" onclick="return false;">Expand Me</a> 
///this way u can make a link to act like a button too 

<div id="toggleMe"> //this will be hidden during the page load 
    //your elements 
</div> 

///if you decide to make it display on a click, follow below: 
<script type="text/javascript" src="jquery.js"> </script> //make sure u include jquery.js file in ur project 
<script type="text/javascript"> 
$(document).ready(function() { 
     $("a").click(function() { 
      $('#toggleMe').toggle("slow"); //Animation effect 
     }); 
    }); 
</script> 

///Now for every alternate click, it shows and hides, but during page load; its hidden. 
//Hope this helps you guys ...

Quelle

2011-04-11 01:48:15 Ravi

Mit CSS3 können Sie Inhalt ausblenden, bis eine Seite geladen wird, indem Sie den :only-child Selektor verwenden.

Here is a demonstration of how to do this. Die Grundidee ist, dass CSS beim Laden einen einzelnen Knoten zum DOM hinzufügt, während dieser Knoten und seine Kindknoten geladen werden. Sobald ein zweites Kind zum gegebenen Elternknoten hinzugefügt wird, ist die Selektorregel :only-child gebrochen. Wir stimmen mit diesem Selektor überein und setzen , um den angegebenen Knoten auszublenden.

<!doctype html> 

<html> 

    <head> 
    <title>Hide content until loaded with CSS</title> 
    <style type="text/css" media="screen"> 
     .hide-single-child > :only-child { 
     display: none; 
     } 
    </style> 
    </head> 

    <body> 
    <div class='hide-single-child'> 
     <div> 
     <h1>Content Hidden</h1> 
     <script> 
      alert('Note that content is hidden until you click "Ok".'); 
     </script> 
     </div> 
     <div></div> 
    </div> 
    </body> 

</html>

Quelle

2013-12-25 12:58:32

Der beste Weg, Javascript-Funktion über Seite laden geladen wird, ist

$(window).bind("load", function() { 
    // code here 
});

In Ihrem Fall

div.hidden 
{ 
    display: none 
} 

<div id="extraControls" class="hidden"> 
</div> 

$(window).bind("load", function() { 
    $("div#extraControls").removeClass("hidden"); 
});

Quelle

2017-09-14 14:00:34 drafiko

Wie verstecke ich ein HTML-Element vor dem Laden der Seite

Antwort

Verwandte Themen