Et si nous obtenions des images de la taille d'un rapport aspect en faisant presque rien?

Résoudre le chargement d'image bégaiement: utilisez les fonctionnalités natives du navigateur pour atteindre l'affichage d'image sans couture

Avez-vous déjà rencontré une situation où les images de la page Web se chargent lentement, provoquant le bégaiement de la page? Cela est généralement dû au fait que le navigateur ne connaît pas le rapport d'aspect de l'image, il ne peut donc pas réserver suffisamment d'espace pour afficher l'image. Cet article explorera une solution élégante qui tire parti des fonctionnalités natives du navigateur pour résoudre ce problème sans trop de code supplémentaire.

Supposons que vous utilisez une image 800x600 pixels dans une page Web et définissez sa largeur sur width: 100%; . La largeur d'affichage réelle de l'image variera en fonction de la taille du conteneur, mais son rapport d'aspect reste le même. Le problème est que le navigateur ne peut pas déterminer la hauteur de l'image avant le chargement de l'image, ce qui entraînera le bégaiement de la page.

Solution: profitez des propriétés width et height

Étonnamment, juste <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174511723380054.jpg" class="lazy" alt="Et si nous obtenions des images de la taille d'un rapport aspect en faisant presque rien?"> Aller plus loin: support de style natif du navigateur

Une solution plus idéale consiste à faire en sorte que le navigateur lui-même prenne en charge cette fonctionnalité. Une façon consiste à profiter de aspect-ratio de CSS, mais cela oblige les développeurs à l'ajouter manuellement, ce qui n'est pas assez pratique. Une meilleure solution consiste à ajouter les paramètres du rapport d'aspect par défaut à la feuille de style de l'agent utilisateur du navigateur, par exemple:

 img, vidéo {
  Ratio d'aspect: att (largeur) / att (hauteur);
}

De cette façon, tant que l'image a des attributs width et height , le navigateur peut automatiquement calculer et réserver l'espace correct pour éviter le décalage de charge.

Les avantages de cette approche sont:

1. Facile à comprendre et à mettre en œuvre: pas besoin d'apprendre de nouveaux attributs ou des astuces CSS complexes.
2. Applicabilité large: de nombreux sites Web utilisent déjà des attributs width et height sans modifier le code existant.
3. Friendly des développeurs: les nouveaux et anciens développeurs peuvent facilement le comprendre et l'utiliser.

Actuellement, certains navigateurs testent la faisabilité de cette solution. Cela simplifiera considérablement le développement Web et améliorera l'expérience utilisateur.

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!