web-dev-qa-db-fra.com

JavaScript - Cacher une div au démarrage (charger)

J'ai un div dans ma page php qui utilise jQuery pour le cacher une fois la page chargée. Mais y a-t-il un moyen de le cacher dès le début du chargement?

La raison pour laquelle je pose cette question est que, pendant une brève seconde, vous pouvez voir la div lorsque la page est en train de se charger, puis se cacher lorsque la page est entièrement chargée.

Cela semble peu professionnel.

Je me demandais s'il y avait un moyen de contourner cela?

Merci

javascriptjquerycsshtmlhide
37
Oliver Jones

Utilisez le style css pour masquer la div.

#selector { display: none; }

ou utilisez-le comme ci-dessous,

CSS:

.hidden { display: none; }

HTML

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

et dans jQuery

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

J'ai eu le même problème.

Utiliser CSS pour masquer n'est pas la meilleure solution, car parfois vous voulez que les utilisateurs sans JS puissent voir le div. La solution la plus propre consiste à masquer le div avec JQuery. Mais la div est visible environ 0,5 seconde, ce qui est problématique si la div est en haut de la page.

Dans ces cas, j'utilise une solution intermédiaire, sans JQuery. Celui-ci fonctionne et est immédiat:

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

Bien sûr, vous pouvez toujours ajouter tous les effets souhaités sur la div, JQuery toggle () par exemple. Et vous obtiendrez le meilleur comportement possible (à mon humble avis):

  • pour les utilisateurs non-JS, la div est visible directement
  • pour les utilisateurs de JS, la div est cachée et a un effet bascule.
7
David G

Sauf la solution CSS. Le moyen le plus rapide est de le cacher immédiatement avec un script.

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

Dans ce cas, je recommanderais la solution CSS de Vega. Mais si vous avez besoin de quelque chose de plus complexe (comme une animation), vous pouvez utiliser cette approche.

Cela a quelques complications (voir les commentaires ci-dessous). Si vous souhaitez que ce script s'exécute aussi rapidement que possible, vous ne pouvez pas utiliser jQuery, utilisez uniquement JS natif et différez le chargement de tous les autres scripts.

7
Halcyon

Pourquoi ne pas ajouter "display: none;" à l'attribut de style div? C'est tout ce que fait la fonction JQuery .hide ().

1
Moo

Cette méthode que j'ai beaucoup utilisée, je ne sais pas si c'est un très bon moyen, mais cela fonctionne très bien pour mes besoins.

<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

En utilisant CSS, vous pouvez simplement définir l’affichage: aucun pour l’élément dans un fichier CSS ou dans un attribut de style

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



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

ou avoir le JS juste après la div pourrait être assez rapide aussi, mais pas aussi propre

0
GillesC