Est-ce que « display:none » empêche vraiment le chargement de l'image ?

Impact de « display:none » sur le chargement des images

De nombreux didacticiels de développement de sites Web réactifs suggèrent d'utiliser la propriété CSS « ​​display:none » pour empêcher le contenu d’apparaître sur les navigateurs mobiles, accélérant ainsi les temps de chargement des sites Web. Cependant, "display:none" empêche-t-il vraiment le chargement des images ?

"display:none" arrête-t-il le chargement des images ?

Les navigateurs sont devenus plus sophistiqués. Aujourd'hui, selon sa version, votre navigateur peut s'abstenir de charger une image s'il détermine sa non-pertinence.

Bien qu'une image puisse avoir un style "display:none" attribué, ses dimensions restent accessibles par des scripts. Dans les cas où l'élément parent est masqué, la version 68.0 de Chrome omet le chargement de l'image.

Alternatives à "display:none"

Si vous souhaitez spécifiquement empêcher le chargement de l'image, envisagez les techniques suivantes :

• Omettez l'élément IMG du document.
• Définissez l'attribut IMG src sur "data:" ou "about:blank."

Limitations de "display:none"

"affichage : aucun" peut ne pas être efficace pour les images affichées sur l'écran initial et non chargées paresseusement. L'image se chargera mais ne sera pas visible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!