Est-ce que « display:none » empêche vraiment le chargement des images ?

"display:none" peut-il empêcher le chargement des images ?

Dans la conception Web réactive, masquer le contenu inutile sur les navigateurs mobiles pour améliorer les performances est un problème. pratique courante. Une approche consiste à utiliser la propriété CSS « ​​display:none ». Cette méthode empêche-t-elle effectivement le chargement des images, ou le contenu est-il toujours récupéré malgré la dissimulation ?

Réponse :

Les navigateurs modernes sont devenus plus intelligents dans leur gestion des ressources. Selon le navigateur et la version, le chargement de l'image peut être interrompu s'il est jugé non essentiel.

Plus précisément, les navigateurs tels que Chrome v68.0 détectent les éléments parents masqués et ignorent le chargement de l'image en conséquence. Ce comportement peut être vérifié via les outils de développement du navigateur en inspectant l'onglet "réseau".

Cependant, si l'image est affichée sur le premier écran sans chargement différé, "display:none" peut ne pas empêcher complètement le chargement, bien que cela masquera l'image.

Alternatives pour empêcher le chargement de l'image :

Pour éviter complètement les chargement du contenu, envisagez les alternatives suivantes :

• Omettez l'élément IMG : Évitez simplement d'ajouter l'élément IMG au document HTML.
• Définissez le source de l'image à "data:" ou "about:blank": Ces valeurs ne déclenchent pas le chargement de l'image.

Rappelez-vous que "display:none" affecte uniquement la visibilité et n'empêche pas complètement la récupération du contenu. Pour une véritable optimisation des performances, explorez les méthodes alternatives mentionnées ci-dessus.

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!