Comment puis-je masquer un élément HTML avant la chargement de la page?

J'ai un code JQuery qui montre ou masque une division.

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

J'ai d'abord voulu que le div ne soit pas visible, donc j'ai utilisé:

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

Cependant, sur le navigateur, le contenu est visible pendant une seconde avant de disparaître, ce qui n'est pas ce que je veux.

Comment configurer le cache de l'élément avant que la page ne se charge, tout en gardant la possibilité de le cacher de manière dynamique avec un script?

 div.hidden { display: none } <div id="extraControls" class="hidden"> </div> $(document).ready(function() { $("div#extraControls").removeClass("hidden"); }); 

Faire une classe css

 .hidden { display: none; } 

Ajoutez ceci à n'importe quel élément que vous ne voulez pas être visible lors du chargement de la page. Ensuite, utilisez $("div#extraControls").show(); Pour l'afficher à nouveau.

Dans CSS:

 #extraControls { display: none; } 

Ou en HTML:

 <div id="extraControls" style="display: none;"></div> 
 #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 ... 

Avec CSS3, vous pouvez effectivement cacher le contenu jusqu'à ce qu'une page se charge en profitant du sélecteur :only-child .

Voici une démonstration de la façon de procéder . L'idée de base est que CSS pendant le chargement ajoutera un seul noeud au DOM pendant le chargement de ce nœud et de ses nœuds enfants. En outre, une fois qu'un deuxième enfant est ajouté au noeud parent donné, la règle du sélecteur :only-child est interrompue. Nous nous appuyons sur ce sélecteur et définissons l' display: none pour masquer le nœud donné.

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

Ce que vous pouvez faire, c'est d'insérer une étiquette de script ligne à la fin du document, ou immédiatement après le div avec id "extraControls". Devrait être un feu plus tôt que.

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

Bien sûr, vous pouvez également faire ce côté serveur, mais peut-être il y a une bonne raison pour laquelle vous ne voulez pas le faire (comme si vous avez les contrôles visibles si le navigateur ne supporte pas javascript).