In dem unten eingebetteten Video erklärt Jen Simmons, wie man das Laden von Bildern durch die Verwendung von Breiten- und Höhenattributen verbessert. Das Problem ist, dass es viel Ruckeln gibt, wenn ein Bild zum ersten Mal geladen wird, da ein img standardmäßig eine Höhe von 0 hat, bevor das Bild-Asset erfolgreich vom Browser heruntergeladen wurde. Dann muss die Seite danach neu gezeichnet werden, was den gesamten Inhalt verschiebt. Ich habe dieses Problem definitiv *sehr oft* auf großen Nachrichtenwebsites gesehen.
Jedenfalls empfiehlt Jen, dass wir height- und width-Attribute zu Bildern hinzufügen sollten, wie hier:
<img src="dog.png" height="400" width="1000" alt="A cool dog" />Das liegt daran, dass Firefox & Chrome diese Werte nun berücksichtigen und all das Ruckeln entfernen, bevor das Bild geladen wurde, *selbst wenn Sie diese Werte in CSS mit einer flexiblen Breite und damit unbekannten Höhe überschreiben*. Das bedeutet, dass der Inhalt immer an derselben Position bleibt, auch wenn das Bild noch nicht geladen wurde. In der Vergangenheit habe ich an einer Reihe von Projekten gearbeitet, bei denen ich Bilder weiter unten auf der Seite platziert habe, nur weil ich diese Art von Ruckeln verhindern wollte. Ich denke, das löst dieses Problem recht gut.
Ich dachte, das wäre seit Jahren ein Standard
Das war es gewissermaßen, insbesondere bei Designs mit fester Breite, bei denen die Breiten-/Höhenattribute *tatsächlich die Größe hatten, in der das Bild gerendert wurde*. Dann war das vorbei, als wir alle begannen, flexible Medien zu verwenden. Heutzutage sieht man selten ein Bild, das *nicht*
max-width: 100%hat. Und sobald ein Bild eine flexible Breite hat, bedeutet das, dass die Höhe unbekannt ist, bis es heruntergeladen wird, da die Höhe auf dem Seitenverhältnis des Bildes basiert.Diese Änderung ist also so etwas wie *zwinker zwinker, wir wissen, dass dies nicht die Größe ist, in der das Bild letztendlich gerendert wird, es ist nur eine Möglichkeit für Sie, uns über sein Seitenverhältnis zu informieren, und wir reservieren Platz in diesem flüssigen Design basierend darauf.* Das ist cool.
Ist das effektiv ein Seitenverhältnis? Zum Beispiel, wenn wir die Zahlen im Artikel durch 4 bzw. 10 (oder 2 und 5) ersetzen, würden wir den gleichen Vorteil erzielen?
Ja!
Nett. Alle unsere Bilder verwenden den Padding-Prozent-Trick als Seitenverhältnis, daher bin ich mir nicht sicher, ob dies viel Nutzen hat, bis die `aspect-ratio`-Eigenschaft vollständige Browserunterstützung hat. Bis dahin Wrap-Divs für alle Bilder!
Gibt es eine caniuse-Seite, um den Status dieser Funktion in verschiedenen Browsern zu überprüfen?...
Wird das auf normale, nicht ersetzte
<div>-Elemente anwendbar sein? Wenn nicht, bleibt uns der Padding-Hack, um das richtige Seitenverhältnis ohne Ruckeln zu erhalten, oder wir können die CSS-Eigenschaft `aspect-ratio` verwenden.beim Einfügen
wird diese Technik ohne Ruckeln funktionieren? Wie groß ist die berechnete Breite des Bildes jetzt?
https://caniuse.com/#feat=mdn-css_properties_aspect-ratio_internal-value