JürgenB: Unsichtbares Bild erst bei Useraktion laden

problematische Seite

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

akzeptierte Antworten

  1. problematische Seite

    Hallo Jürgen,

    loading="lazy"?

    Nicht in allen Brausern, aber in ziemlich vielen.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      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

      1. problematische Seite

        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

        --
        sumpsi - posui - obstruxi
        1. problematische Seite

          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

          1. problematische Seite

            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".

            1. problematische Seite

              Hallo,

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

              Gruß
              Jürgen

              1. problematische Seite

                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…

                1. problematische Seite

                  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

                  1. problematische Seite

                    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…

        2. problematische Seite

          @@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

          --
          “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
          1. problematische Seite

            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

            --
            sumpsi - posui - obstruxi
            1. problematische Seite

              Hallo Gunnar und Rolf,

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

              tut es.

              Gruß
              Jürgen