Amélioration progressive - ne pas masquer les éléments avec CSS

Question

Je me retrouve souvent à montrer/masquer des éléments avec jQuery, par exemple une simple zone de contenu à onglets où le premier onglet est visible et les autres ne sont pas affichés avec le javascript. Je sais que ce n'est pas une bonne pratique de masquer ceux qui sont initialement cachés en utilisant CSS (affichage: aucun) et ensuite montrer les bons avec JS car les utilisateurs non-JS ne verront jamais rien. Donc, par défaut, je montre tout et puis cache les pertinentes avec JS. En procédant ainsi, les éléments cachés se chargeront et ne se cacheront que lorsque le document sera prêt. Comment puis-je arrêter cela? Y a-t-il un moyen de le faire d'une manière qui se dégradera gracieusement, mais aussi de ne pas avoir d'éléments apparaissant pendant le chargement, puis de disparaître rapidement car cela semble un peu foireux.

Answer 1

quelques réflexions ...

Si vous ne me dérange pas d'être jonché jQuery sur toute la page plutôt que d'être tous dans un fichier séparé, vous pouvez appeler $ (« # divToHide »). Cacher () immédiatement après l'apparition de l'élément. Pas très bonne pratique cependant. Bien que cela dépende du cas d'utilisation, si vous êtes en grande partie un concepteur/créateur d'un site de brochure de 5 pages, vous devriez choisir ce qui est bon pour vous!

Ou si vous êtes un peu plus un technicien, vous pourriez aimer déconner .live()/.livequery() et attraper l'insertion de l'élément avec JS et cacher est tout de suite. Voir ce post Is there a jquery event that fires when a new node is inserted into the dom?

Answer 2

Malheureusement, la façon dont le Javascript fonctionne, cela ne semble pas être possible. Il y aura toujours être une fraction de seconde entre la première image rendue et au moment où le JavaScript pour masquer l'élément est exécutéI was wrong about that, jQuery seems to be able to do that. Donc, CSS est le meilleur moyen pour cela. Heureusement, vous pouvez ajouter une feuille de style CSS alternatif dans une balise <noscript> infâme:

<style type="text/css"> 
    #jquery-thing { 
     display: none; 
    } 
</style> 
<noscript> 
    <style type="text/css"> 
     #jquery-thing { 
      display: block !important; 
     } 
    </style> 
</noscript> 

Voici le lien jsFiddle: http://jsfiddle.net/kylewlacy/dbWuc/