Was ist, wenn wir Bilder mit Aspektverhältnissen haben, indem wir fast nichts tun?

Lösen Sie das Bildlade -Stottern: Verwenden Sie native Funktionen mit Browser, um eine nahtlose Bildanzeige zu erzielen

Haben Sie jemals auf eine Situation gestoßen, in der Webseitenbilder langsam geladen werden und die Seite stotterte? Dies liegt normalerweise daran, dass der Browser das Seitenverhältnis des Bildes nicht kennt, sodass er nicht genügend Platz reservieren kann, um das Bild anzuzeigen. In diesem Artikel wird eine elegante Lösung untersucht, die native Browser -Funktionen nutzt, um dieses Problem ohne viel zusätzlichen Code zu lösen.

Angenommen, Sie verwenden ein 800x600 -Pixel -Bild in einer Webseite und setzen Sie seine Breite auf width: 100%; . Die tatsächliche Anzeigebreite des Bildes variiert je nach Containergröße, aber das Seitenverhältnis bleibt gleich. Das Problem ist, dass der Browser die Höhe des Bildes nicht bestimmen kann, bevor das Bild geladen wird, wodurch die Seite stottert.

Lösung: Nutzen Sie die width und height

Überraschenderweise gerecht <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174511723380054.jpg" class="lazy" alt="Was ist, wenn wir Bilder mit Aspektverhältnissen haben, indem wir fast nichts tun?"> Weiter geht

Eine idealere Lösung besteht darin, den Browser selbst diese Funktion zu unterstützen. Eine Möglichkeit besteht darin, aspect-ratio von CSS zu nutzen. Dies erfordert jedoch, dass Entwickler es manuell hinzufügen, was nicht bequem genug ist. Eine bessere Lösung besteht darin, die Einstellungen für den Standard -Seitenverhältnis zum Browser -Benutzeragenten -Stylesheet hinzuzufügen, zum Beispiel:

 IMG, Video {
  Aspektverhältnis: Attr (Breite) / Attr (Höhe);
}

Auf diese Weise kann der Browser, solange das Bild width und height aufweist, automatisch den richtigen Raum berechnen und behalten, um eine Lastverzögerung zu vermeiden.

Die Vorteile dieses Ansatzes sind:

1. Einfach zu verstehen und implementieren: Keine Notwendigkeit, neue Attribute oder komplexe CSS -Tricks zu lernen.
2. Breite Anwendbarkeit: Viele Websites verwenden bereits width und height , ohne vorhandenen Code zu ändern.
3. Entwicklerfreundlich: Neue und alte Entwickler können es leicht verstehen und verwenden.

Derzeit testen einige Browser die Machbarkeit dieser Lösung. Dies wird die Webentwicklung stark vereinfachen und die Benutzererfahrung verbessern.

Das obige ist der detaillierte Inhalt vonWas ist, wenn wir Bilder mit Aspektverhältnissen haben, indem wir fast nichts tun?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!