divs cachés - temps d'attente en réduisant avec affichage de style none + javascript

Question

J'utilise couramment divs cachés sur mes pages jusqu'à ce qu'ils doivent être unhidden avec javascript. Je l'habitude de faire la dissimulation initiale avec javascript trop, mais maintenant déménagé à les cacher avec css pour garantir que la dissimulation a lieu (js désactivé dans le navigateur). De plus il y avait un problème de latence avec js cache (attente pour les js à charge).

Mon problème est que, avec css, il y a encore un certain temps d'attente, et je finis donc en place, y compris le style avec le balisage comme ci-dessous, et je sorte de faire détestez, me fait me sentir comme si je fais quelque chose de mal ..

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

Combien de fois avez-vous les gars faire ça? et est-il un moyen que je peux obtenir le ou js css pour charger en quelque sorte avant que le reste du balisage?

Merci d'avance

Answer 1

Inclure le css dans un bloc de style en ligne en haut de la page:

<style>
  .hidden:  { display: none; }
</style>

Alors annoter votre div avec la classe nécessaire:

<div class="hidden"> ... </div>

Le résultat de cette approche est que pour montrer l'élément, vous ne avez pas besoin de régler l'affichage à block, vous pouvez simplement ajouter / supprimer la classe de l'élément avec JavaScript. Cela fonctionne mieux parce que les besoins ne sont pas tous élément d'affichage = bloc (tables et éléments en ligne ont différents modes d'affichage).

En dépit de ce que l'autre affiche dit, ce n'est pas une mauvaise pratique. Vous devez séparer votre CSS dans le balisage et fonctionnel de présentation - un contrôle fonctionnel des choses logiques comme si ou non quelque chose se montre, on détermine juste présentation comment pour le montrer. Il n'y a pas de problème de mettre en ligne CSS fonctionnelle pour éviter la page sautiller.

Answer 2

Je peux me martelée pour cela, mais dans beaucoup d'applications, quand je veux éviter ce temps d'attente que j'utilise des balises de script inline immédiatement après le contenu, comme ceci:

<div id="hidden-div">
    content
</div>
<script type="text/javascript">
    $('#hidden-div').hide();
</script>

Ou si vous êtes pas en utilisant jQuery:

<div id="hidden-div">
    content
</div>
<script type="text/javascript">
    document.getElementById('hidden-div').style.display = 'none';
</script>

Au début, cela semble maladroit; Cependant, il y a deux raisons pour lesquelles je prends cette approche:

1. La cachette est immédiate (pas d'attente pour l'ensemble de DOM à charger)
2. Les personnes ayant la volonté JavaScript désactivé voir encore le contenu, alors que si nous cacher avec CSS il n'y a aucun moyen pour les utilisateurs non-JS pour le rendre visible à nouveau.

Hope this helps!

Answer 3

Je suggère de déplacer votre écran: aucune règle en haut de la feuille de style il est donc le premier ou la première de quelques analysable, mais pour être honnête, ce serait vraiment dépendre du nombre de demandes http / ressources multimédias que vous avez

Vous pouvez essayer de jeter les js avant la balise de corps d'extrémité et assurant que le css est en haut, et la feuille de style css qui cache ces éléments est le tout premier lié.

Answer 4

Dépend du navigateur. Opera, Konqueror et WebKit CSS et JavaScript de charge en parallèle (tous les CSS est chargé avant d'être appliqué, cependant).

display:none est la meilleure solution, mais vous pouvez utiliser inline-css (comme dans la description) qui est directement chargé de la page, si vous voulez être très prudent, la mauvaise pratique cependant.