Unsichtbares Bild erst bei Useraktion laden

[JürgenB]

Hallo,

ich habe auf meiner Seite Bilder, die erst bei einer Useraktion gezeigt werden sollen. Die Bilder habe ich mit display: none und auch dem Attribut hidden unsichtbar gemacht und blende Sie dann bei Mausklick (etc.) ein.

Leider werden die Bilder beim Öffnen der Seite schon geladen. Gibt es eine Möglichkeit, unsichtbare Bilder so einzubinden, dass Sie nicht geladen werden? Auf so etwas, wie <img data-src="…"> würde ich nicht gerne zurückgreifen.

Auf der ‚problematischen Seite‘ werden die Bilder erst bei Klick auf das Photosymbol in der Landkarte angezeigt.

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

loading="lazy"?

Nicht in allen Brausern, aber in ziemlich vielen.

Rolf

[JürgenB]

Hallo Rolf,

danke für den Tipp. Im Chrome scheint es zu funktionieren, im FF sieht es so aus, als würde das Bild trotzdem noch geladen. Im Safari sehe ich es mir später mal an. Aber lt. caniuse unterstützt er es nicht.

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

vielleicht liegt es daran, dass das Bild zwar display:none ist, aber von seiner Position her im Viewport liegt. Offiziell soll lazy-loading nämlich dafür da sein, dass Bilder erst dann geladen werden wenn der User dorthin srollt.

Idee für einen Hack: Außer display:none auch noch ein left:200% oder so, um das Bild im ausgeblendeten Modus aus dem Viewport zu schieben. Nicht zu weit verschieben, weil der Browser das Hüllrechteck um alle Elemente als Zeichenfläche auffasst; macht man die zu groß, geht die Rendering-Time in die Knie.

Rolf

[JürgenB]

Hallo Rolf,

ich glaube, das wars. Ich habe das Bild noch absolut positioniert. Jetz bleibt für mich nur die Frage, was für einen Hobby-Seitenbastler mit CMS-Erfahrung einfacher ist:

#map_img, #map_img img { display: none; position: absolute; left: 200%;  }

<img loading="lazy" hidden src="Burg_Luedinghausen.jpg" data-geo="lat:51.77145164917749,lon:7.4397611618042" 
				alt="Burg Lüdinghausen" data-link="https://www.burg-luedinghausen.de">

oder

<img data-src="Burg_Luedinghausen.jpg" data-geo="lat:51.77145164917749,lon:7.4397611618042" 
				alt="Burg Lüdinghausen" data-link="https://www.burg-luedinghausen.de">

Aber noch mal Danke für die Hilfe.

Gruß
Jürgen

[Mitleser 2.0]

Jetz bleibt für mich nur die Frage, was für einen Hobby-Seitenbastler mit CMS-Erfahrung einfacher ist:

"img data-src" vs "img loading="lazy"

Letztlich doch sogar die Frage, was allgemein besser ist, oder? Kommen wir da nicht schnell zu der Antwort "definierte Standardlösung"?

MDN selbst sagt: "Include this polyfill to provide support for older and currently incompatible browsers".

[JürgenB]

Hallo,

der Polyfill erwartet aber die Bilder in einem noscript-Element. Das html muss also auch erweitert werden.

Gruß
Jürgen

[Mitleser 2.0]

der Polyfill erwartet aber die Bilder in einem noscript-Element. Das html muss also auch erweitert werden.

Oh, das ist natürlich Mist. Sorry, hatte es mir nicht genauer angeschaut und MDN einfach vertraut.

Sollte der Schritt alternativlos sein, würde ich einfach auf den Polyfill verzichten. Der Support sieht lt. MDN doch schon ganz gut aus. Wenns bei den Apple-Jüngern dann auch bereits als Experimental steht…

[JürgenB]

Hallo,

die Seite ist ja auch mit lazy-loading in allen Browsern benutzbar. Es geht ja nur um die Vermeidung von Traffik.

Gruß
Jürgen

[Mitleser 2.0]

die Seite ist ja auch mit lazy-loading in allen Browsern benutzbar. Es geht ja nur um die Vermeidung von Traffik.

Schon klar. Nur gehe ich mal davon aus, dass Du Deinen Web-Auftritt nicht nach Traffic zahlst. Es ist ja löblich, dass Du den Vorteil all Deinen Besuchern zu Gute kommen lassen möchtest. Aber per Stand heute lt. Caniuser würde ich's persönlich in der Güterabwägung einfach dabei belassen oder einen Polyfill suchen, der womöglich ohne Markup-Anpassungen auskommt…

[Gunnar Bittersmann]

@@Rolf B

Idee für einen Hack: Außer display:none auch noch ein left:200% oder so, um das Bild im ausgeblendeten Modus aus dem Viewport zu schieben. Nicht zu weit verschieben, weil der Browser das Hüllrechteck um alle Elemente als Zeichenfläche auffasst; macht man die zu groß, geht die Rendering-Time in die Knie.

Aus dem Grund sollte es besser sein, das Ding nach oben oder unten rauszuschieben.

😷 LLAP

[Rolf B]

Hallo Gunnar,

ja, da war ich mir auch nicht sicher. Bei oben/unten mag es nur schwieriger mit der Universalität der Idee sein, weil die meisten Webseiten eher auf/ab als links/rechts scrollen.

Aber ein top:-200vh sollte wohl immer hinreichen.

Rolf

[JürgenB]

Hallo Gunnar und Rolf,

Aber ein top:-200vh sollte wohl immer hinreichen.

tut es.

Gruß
Jürgen