Comment cacher des éléments avec jQuery avant qu’ils ne soient rendus?

Je veux générer une mise en page HTML avec des zones (divs, spans) qui peuvent être affichées / masquées de manière conditionnelle. Ces zones sont masquées par défaut.

Si j’appelle la méthode .hide () avec jquery sur document.ready ces zones peuvent clignoter (les navigateurs rendent des documents partiellement chargés). Donc, j’applique le style “display: none” dans la mise en page HTML.

Je me demande quelle est la meilleure pratique pour éviter de cligner des yeux, car l’application “display: none” casse la règle de l’incapsulation – Je sais ce que fait jquery avec hide / show et l’utiliser. Si la mise en œuvre / masquage de jquery change un jour, je vais rendre tout le site inutilisable.

Merci d’avance

Il n’y a absolument rien de mal à définir une propriété d’affichage intial d’un élément, surtout si vous l’encapsulez dans une classe css.

@ Andrew,

Je sais que la réponse a déjà été acceptée, mais en utilisant display: none; sera un cauchemar pour les utilisateurs sans Javascript.

En utilisant le Javascript en ligne, vous pouvez cacher un élément sans qu’il ne clignote jamais. Les utilisateurs sans Javascript pourront toujours le voir.

Considérons quelques divs qui devraient être masqués lors du chargement de la page.

     
... some content ...
... some content ...

Le Javascript intégré s’exécutera dès que l’élément sera rendu, le cachant ainsi à l’utilisateur.

Je suis d’accord avec Boris Guéry, ce n’est pas une ingénierie excessive, mais plutôt une pratique exemplaire standard. J’irais un peu différemment que Boris, en ajoutant initialement une classe no-js au code HTML, puis en la supprimant avec JavaScript.

De cette façon, vous n’attendez pas que le document soit prêt à cacher le contenu, et sans JavaScript, vous voyez toujours le contenu. En supposant que l’utilisateur ne l’a pas, JavaScript est plus conforme à la philosophie de l’amélioration progressive.

ex:

   

mon css:

 #foo { display: none; } html.no-js #foo { display: block; } 

et javascript

 $(document).ready( function() { $('html').removeClass('no-js'); } ); 

********* OU au cas par cas ***********

ex:

 
foobar and stuff

css:

 .no-js { display:none; } #foo { display: block; } #foo.no-js { display: none; } 

js:

 $(document).ready(function(){ // remove the class from any element that has it. $('.no-js').removeClass('no-js'); }); 

Je mets généralement une classe .js à mon élément pour définir la propriété appropriée lorsque javascript est activé.

Je peux ensuite définir le CSS en fonction de si javascript est présent ou non.

ex:

   

mon css:

 html.js #foo { display: none; } 

et javascript

 $(document).ready( function() { $(html).addClass('js'); } ); 

J’ai aussi eu des problèmes avec IE, et j’ai trouvé cela très utile: http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether -javascript-support-is-available /

Pourquoi ne pas faire juste cela?

 // Hide HTML element ASAP $('html').hide(); // DOM-ready function $(function () { // Do stuff with the DOM, if needed // ... // Show HTML element $('html').show(); } 

Cela semble marcher correctement!

Cordialement.

vous pouvez appliquer “display: none” dans une classe CSS.

Parce que l’ordre dans lequel un navigateur doit lire du code HTML pour que le JavaScript trouve l’élément. Vous devez marquer l’élément caché, car le navigateur lit votre HTML.

Comment pouvez-vous également insérer le code HTML dans votre code JavaScript, et vous pouvez appeler hide avant de le rendre.

J’utiliserais toujours Modernizr.js http://modernizr.com/ pour gérer cela.

Avec Mondernizr, une classe “js” ou “no-js” est ajoutée à la balise HTML de votre page.

De là, vous pouvez masquer vos éléments uniquement si la balise html a la classe js.

Modernizr est idéal pour beaucoup d’autres applications et mérite d’être lu si vous ne l’avez pas encore utilisé: http://modernizr.com/docs/

Ce que je fais toujours, c’est créer un div vide. Et si certaines données à l’intérieur de ce composant doivent être affichées, je charge les données (c.-à-d. Html) de manière asynchrone en utilisant $ .ajax ().

Pas besoin d’une librairie supplémentaire.

C’est ma suggestion. Il utilise cette solution pour créer une nouvelle règle CSS. L’essentiel: une classe CSS qui cache du code HTML sera créée si JS est disponible, sinon non. Et cela se produit avant que le contenu principal (avec les parties HTML à masquer initialement) soit traité!

        
before
after

Un peu plus compliqué, mais je pense que c’est une solution appropriée. L’avantage est que le scintillement est empêché et que cela fonctionne si JS n’est pas activé. Et il ne nécessite pas jQuery.

Après un certain temps de reflection, j’ai eu l’idée de la solution suivante. Par rapport à mon autre solution, je l’ai réduite à l’essentiel (et je l’ai utilisée pour append une classe par JS):

      
Content that should be initially hidden if possible.

La balise de script est exécutée immédiatement et ajoute une classe à un conteneur. Dans ce conteneur, certains éléments nesteds sont désormais masqués car le conteneur a la classe spéciale et une règle CSS a maintenant un effet.

Encore une fois, cela se produit avant que le rest du HTML ne soit traité (empêche le clignotement). Et aussi, si JS est désactivé, tous les éléments sont visiblement par défaut – ce que l’on peut appeler l’ amélioration progressive .

Vous ne savez pas si cela fonctionne dans tous les navigateurs. Mais l’OMI serait une solution simple et soignée.