Est-ce que « display:none » empêche le chargement des images dans les navigateurs modernes ?

Dévoilement de l'impact de "display:none" sur le chargement des images

Les défenseurs de la conception Web réactive s'appuient souvent sur le CSS "display:none" propriété pour améliorer les expériences de navigation mobile. Cependant, une question cruciale se pose : cette propriété empêche-t-elle le chargement des images, ou les récupère-t-elle toujours en arrière-plan ?

La vérité dévoilée : les navigateurs en évolution

Initialement , définir "l'affichage" d'une image sur "aucun" la masquerait sans affecter son chargement. Cependant, les navigateurs modernes sont devenus plus intelligents. Ils peuvent désormais détecter lorsqu'une image n'est pas nécessaire pour la partie visible de la page et ignorer son chargement.

Chrome, en particulier, a la capacité d'empêcher le chargement de l'image si l'élément parent de l'image est masqué. Ce comportement peut être observé ici : http://jsfiddle.net/tnk3j08s/.

Approches alternatives pour empêcher le chargement

Si vous souhaitez empêcher complètement le chargement d'une image , envisagez ces alternatives :

• Suppression de l'élément IMG : Excluez simplement l'élément IMG du document.
• Modification de la source IMG : Mettez à jour l'attribut src de l'IMG en "data:" ou "about:blank" pour empêcher la récupération réelle de l'image.

Remarques importantes

Pour que les stratégies ci-dessus fonctionnent efficacement, votre image ne doit pas être visible sur l'écran initial et ne doit pas être chargée paresseusement. Si ces conditions ne sont pas remplies, l'image peut toujours être chargée mais masquée.

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!