Ich möchte lowsrc mit dem img-Tag verwenden, um ein Bild mit niedriger Auflösung zuerst (und schneller) anzuzeigen, während das Bild mit der größeren Auflösung geladen wird.
Meine Bilder mit hoher Auflösung sind @ 800 KB und die Versionen mit niedriger Auflösung bei 50 KB.
Da lowsrc veraltet ist und viele Browser es anscheinend nicht unterstützen, suche ich nach einer Lösung, die dasselbe tut, vorzugsweise mit so wenig Code wie möglich.
Gibt es einen guten Ersatz für lowsrc?
Die W3C-Empfehlung, die HTML5 definiert, enthält eine Liste von veralteten, fehlerhaften Funktionen einschließlich des Attributs lowsrc . Es wird empfohlen, ein progressives JPEG-Bild zu erstellen, dessen erster Scan das gleiche räumliche Detail wie das 50-KB-Bild aufweist und dessen spätere Scans die zusätzlichen Details im gesamten 800-KB-Bild ausfüllen. Dieser Mechanismus erfordert vermutlich, dass Benutzeragenten HTTP-Bereichsanforderungen verwenden, um zu bestimmen, wie viele Daten relativ zu der Größe abgerufen werden, in der das Bild angezeigt wird, so wie sie Bereichsanforderungen verwenden, um die Quelle eines Elements audio oder video zu suchen .
Ich habe zwei (drei in der Zukunft) Lösungen:
Reine CSS. Funktioniert, wenn Sie nur ein einzelnes Platzhalterbild für alle geladenen Bilder haben. Fügen Sie einfach einen Hintergrund für Bilder mit [lowsrc] -Eigenschaft ein und geben Sie eine minimale Höhe an.
Verwenden Sie JS, um den Hintergrund festzulegen. Siehe Ссылка und setze <body onload> korrekt.
Zukunft. Derzeit nicht funktionierend (2015). Ähnlich wie # 2, aber mit attr () CSS-Funktion könnte man den Hintergrund festlegen der Wert von [lowsrc] .
Alle diese Lösungen arbeiten mit einem Hintergrund, der es nicht erlaubt, die richtige Höhe des Bildes entsprechend der Höhe seines Hintergrunds anzugeben.
%Vor% Sie hätten [lowsrc] arbeiten lassen können: - /
Tags und Links javascript html css