display:none
signifie que l'élément n'est pas rendu dans le cadre du DOM, il n'est donc pas chargé tant que la propriété d'affichage ne change pas.
visibility:hidden
charge l'élément, mais ne l'affiche pas.
Pourquoi jQuery utilise display:none
pour ses fonctions show/hide au lieu de basculer entre visibility:hidden
et visibility:visible
?
Parce que dans display:none
, L'élément, à toutes fins utiles, cesse d'exister - il n'occupe aucun espace. Cependant, dans visibility:hidden
, C'est comme si vous veniez d'ajouter opacity:0
À l'élément - il occupe la même quantité d'espace mais agit simplement comme invisible.
Les créateurs de jQuery pensaient probablement que le premier serait mieux adapté à .hide()
.
visibility: hidden
rend un élément invisible mais ne le supprime pas de la mise en page de la page. Il laisse une boîte vide où se trouvait l'élément. display: none
le supprime de la mise en page afin qu'il n'occupe pas d'espace sur la page, ce qui est généralement ce que les gens veulent lorsqu'ils cachent quelque chose.
Visibilité: caché rend l'élément invisible d'une manière qui utilise toujours l'espace sur la page. Affichage: aucun ne fait que l'élément n'a pas d'espace et qu'il soit complètement disparu, alors qu'il existe toujours dans le DOM.
La visibilité rend simplement l'élément invisible, mais il prendrait encore de la place sur l'écran.
Visibility:hidden
rend juste l'élément invisible mais il est chargé dans DOM donc il consomme du temps de chargement. Mais Display:none
ne charge pas l'élément.