Est-ce que "display:none" empêche le chargement d'une image ?

Question

Tous les didacticiels sur le développement de sites Web réactifs recommandent l'utilisation de l'option display:none Propriété CSS permettant de masquer le chargement du contenu sur les navigateurs mobiles afin que le site Web se charge plus rapidement. Est-ce vrai ? Est-ce que display:none ne charge pas les images ou charge-t-il toujours le contenu sur le navigateur mobile ? Existe-t-il un moyen d'empêcher le chargement de contenu inutile sur les navigateurs mobiles ?

Answer 1

Les navigateurs deviennent de plus en plus intelligents. Aujourd'hui, votre navigateur (selon la version) peut ignorer le chargement de l'image s'il peut déterminer qu'elle n'est pas utile.

L'image a un display:none mais sa taille peut être lue par le script. Chrome v68.0 ne charge pas les images si le parent est caché.

Vous pouvez le vérifier là-bas : http://jsfiddle.net/tnk3j08s/

Vous auriez également pu le vérifier en consultant l'onglet "réseau" des outils de développement de votre navigateur.

Notez que si le navigateur se trouve sur un ordinateur doté d'un petit processeur, le fait de ne pas avoir à rendre l'image (et à mettre en page) rendra l'ensemble de l'opération de rendu plus rapide, mais je doute que ce soit quelque chose qui ait vraiment un sens aujourd'hui.

Si vous voulez empêcher le chargement de l'image, vous pouvez simplement ne pas ajouter l'élément IMG à votre document (ou définir l'élément IMG src à l'attribut "data:" ou "about:blank" ).

Answer 2

Si vous faites de l'image l'image d'arrière-plan d'un div en CSS, lorsque ce div est défini sur "display : none", l'image ne se charge pas. Lorsque le CSS est désactivé, l'image ne se charge toujours pas, car le CSS est désactivé.

Answer 3

La réponse n'est pas aussi simple qu'un simple oui ou non. Consultez les résultats d'un test que j'ai récemment effectué :

• Dans Chrome : Les 8 images de capture d'écran-* sont chargées (img 1)
• Dans Firefox : Seule l'image de la capture d'écran* actuellement affichée (img 2) est chargée.

Donc, après avoir creusé davantage, j'ai trouvé ce qui explique comment chaque navigateur gère le chargement des ressources img en fonction de css display : none ;

Extrait de l'article de blog :

• Chrome et Safari (WebKit) :
  WebKit télécharge le fichier à chaque fois, sauf lorsqu'un arrière-plan est appliqué par l'intermédiaire d'une requête requête média.
• Firefox :
  Firefox ne téléchargera pas l'image appelée avec l'image d'arrière-plan si les styles sont masqués, mais il téléchargera toujours les actifs à partir des balises img.
• Opéra :
  Comme le fait Firefox, Opera ne chargera pas d'images d'arrière-plan inutiles.
• Internet Explorer :
  IE, comme WebKit, téléchargera les images d'arrière-plan même si elles ont display : none ; Quelque chose d'étrange apparaît avec IE6 : Les éléments avec une image d'arrière-plan et display : none en ligne ne seront pas téléchargés... Mais ils le seront si ces styles ne sont pas appliqués en ligne.

Answer 4

Oui, le rendu sera plus rapide, légèrement, seulement parce qu'il n'y a pas besoin de rendre l'image et que c'est un élément de moins à trier sur l'écran.

Si vous ne voulez pas qu'il soit chargé, laissez un DIV vide dans lequel vous pourrez charger du html plus tard, contenant une balise <img> étiquette.

Essayez d'utiliser firebug ou wireshark comme je l'ai déjà mentionné et vous verrez que les fichiers sont effectivement transférés même si display:none est présent.

Opera est le seul navigateur qui ne charge pas l'image si l'affichage est défini sur none. Opera est maintenant passé à webkit et rendra toutes les images même si leur affichage est réglé sur none.

Voici une page de test qui le prouve :

http://www.quirksmode.org/css/displayimg.html

Answer 5

Quirks Mode : images et affichage : none

Lorsque l'image a display: none ou se trouve à l'intérieur d'un élément avec display:none le navigateur peut choisir de ne pas télécharger l'image jusqu'à ce que l'utilisateur ait reçu l'information. display est fixé à une autre valeur.

Seul Opera télécharge l'image lorsque vous basculez l'option display à block . Tous les autres navigateurs le téléchargent immédiatement.