Lazy Loading HTML5-Bildelement

Lesezeit: 8 Minuten

Benutzeravatar von MrRay
HerrRay

Ich habe (erfolglos) nach einer zuverlässigen Methode zum faulen Laden von Bildern gesucht, während ich die HTML5-Spezifikation verwendet habe <picture>. Die meisten Lösungen/Plug-ins da draußen verlassen sich derzeit auf die Verwendung von data- Attribute. Ich könnte mich irren, aber es scheint nicht, dass diese Methode in Verbindung mit <picture>.

Ich möchte wirklich nur in die richtige Richtung gelenkt werden. Wenn jemand eine Lösung hat, die er derzeit verwendet, würde ich gerne sehen. Vielen Dank!

Hier ist das Standard-Markup gemäß der HTML5-Spezifikation:

<picture width="500" height="500">
    <source media="(min-width: 45em)" src="large.jpg">
    <source media="(min-width: 18em)" src="med.jpg">
    <source src="small.jpg">
    <img src="small.jpg" alt="">
</picture>

  • Kannst du bitte dein Markup zeigen? Mit Lazy-Loading meinst du “laden, wenn im Ansichtsfenster“? Welche Methoden haben Sie gefunden, können Sie bitte eine posten und zeigen, wie sie angewendet werden könnte <pictures> (und warum würde das nicht funktionieren)?

    – Bergi

    3. Juni 2014 um 21:49 Uhr

  • Ja, tut mir leid, dass ich die Annahme gemacht habe. Mit Lazy-Loading von Bildern meine ich, wenn sie sich im Ansichtsfenster befinden. Die häufigste Lösung für Bilder, die ich gesehen habe, ist Lazy-Load-Plugin für jQuery.

    – HerrRay

    3. Juni 2014 um 21:54 Uhr

  • Hm, Dieses Plugin ist keine Zauberei. Sie könnten es leicht an die Arbeit anpassen <source> Elemente in einem Bild, anstatt die zu verwenden src Attribut eines Bildes.

    – Bergi

    3. Juni 2014 um 22:04 Uhr

  • @MrRay Ich weiß nicht, wie Browser analysieren (oder analysieren werden) <picture> -Tag, aber höchstwahrscheinlich wird das entsprechende Bild während des HTML-Parsings geladen (wie sie es derzeit für <img> -Tag), also ist die einzige Möglichkeit, es zu stoppen, die Verwendung data-src Attribut statt src in <source> Schild. Aber selbst in diesem Fall gibt es einige Probleme, also haben wir in LazyLoadXT angefangen, es zu verwenden <br> tag statt <source>: ressio.github.io/lazy-load-xt/demo/picture.htm (Ich weiß nicht mehr genau, was das Problem war <source> -Tag, funktionierte aber auf diese Weise in einigen Browsern nicht <br> tat)

    – Denis Rjabow

    5. Juni 2014 um 17:49 Uhr

  • Danke @DenisRyabov. Ja, das ist genau das Problem, das ich zu lösen versuche. Ich habe dieses Plugin gesehen – es ist das einzige, das das Problem behebt. Jetzt verstehe ich, warum es die verwendet <br> Schild!

    – HerrRay

    6. Juni 2014 um 18:29 Uhr

Benutzeravatar von Dai
Dai

Es ist jetzt Februar 2020 und ich freue mich, das mitteilen zu können Google Chrome, Microsoft Edge (der auf Chromium basierende Edge) und Mozilla Firefox alle unterstützen das Neue loading="lazy" Attribut. Der einzige moderne Browser-Holdout ist Apples Safari (sowohl iOS Safari als auch macOS Safari) aber sie haben es vor kurzem zu Safaris Codebasis hinzugefügtalso gehe ich davon aus, dass es irgendwann in diesem Jahr erscheinen wird.

Das loading="lazy" Attribut ist nur für die <img /> Element (und nicht <picture>), aber denken Sie daran, dass die <picture> Element stellt nicht das Tatsächliche dar Ersetzter Inhaltdas <img /> -Element tut (d. h. das Bild, das Benutzer sehen, wird immer von der gerendert <img /> Element, das <picture> Element bedeutet nur, dass der Browser das ändern kann <img src="" /> Attribut. Aus der HTML5-Spezifikation vom Februar 2020 (Hervorhebung von mir):

Das picture Element unterscheidet sich etwas von dem ähnlich aussehenden video und audio Elemente. Während alle von ihnen enthalten source Elemente, die source Element src Das Attribut hat keine Bedeutung, wenn das Element in einem verschachtelt ist picture Element, und der Ressourcenauswahlalgorithmus ist anders. Auch die picture Element selbst zeigt nichts an; es stellt lediglich einen Kontext für seine enthaltenen bereit img -Element, das es ermöglicht, aus mehreren URLs auszuwählen.

Dies sollte also geschehen nur arbeiten:

<picture>
    <source media="(min-width: 45em)" srcset="large.jpg" />
    <source media="(min-width: 18em)" srcset="med.jpg" />
    <source src="small.jpg" />
    <img src="small.jpg" alt="Photo of a turboencabulator" loading="lazy" />
</picture>

Beachten Sie, dass das <picture> Element hat keine width oder height Attribut für sich; stattdessen die width und height Attribute sollten auf das Kind angewendet werden <source> und <img> Elemente:

4.8.17 Dimensionsattribute

Das width und height Attribute an img, iframe, embed, object, video, source wenn der Elternteil a picture Element […] kann angegeben werden, um die Abmessungen des visuellen Inhalts des Elements (Breite bzw. Höhe relativ zur nominellen Richtung des Ausgabemediums) in CSS-Pixeln anzugeben.

[…]

Die beiden Attribute müssen weggelassen werden, wenn die betreffende Ressource nicht sowohl eine intrinsische Breite als auch eine intrinsische Höhe hat.

Also wenn du alles willst <source> Bilder, die gerendert werden sollen 500px durch 500px Wenden Sie dann die Größe auf die an <img> nur Element (und vergiss nicht die alt="" Text für sehbehinderte Benutzer, In vielen Fällen ist dies sogar gesetzlich vorgeschrieben):

<picture>
    <source media="(min-width: 45em)" srcset="large.jpg" />
    <source media="(min-width: 18em)" srcset="med.jpg" />
    <source src="small.jpg" />
    <img src="small.jpg" alt="Photo of a turboencabulator" loading="lazy" width="500" height="500" />
</picture>

  • @KyleMit danke, ich habe mit mehreren Problemen jongliert, ich wollte einen Link zu stackoverflow.com/questions/2321907/… haben.

    – Ciro Santilli OurBigBook.com

    9. Oktober 2020 um 11:58 Uhr

  • Bedeutet dies, dass Attribute width und height könnte auch in der sein img?

    – Lucas David Ferrero

    11. März um 18:05 Uhr

Für alle, die noch daran interessiert sind … Nachdem ich diese Ausgabe erneut besucht hatte, stieß ich auf ein ziemlich neues Skript mit dem Namen Lazysizes. Es ist eigentlich ziemlich vielseitig, aber was noch wichtiger ist, es ermöglicht mir das verzögerte Laden von Bildern, während ich das HTML5-Markup verwende, wie im OP beschrieben.

Vielen Dank an den Ersteller dieses Skripts, @aFarkas.

Benutzeravatar von Sean Doherty
Sean Doherty

Arbeitsbeispiel für verzögertes Laden von Bildern mit der Bild Element und Kreuzungsbeobachter getestet in Chrome und Firefox. Safari unterstützt den Schnittpunktbeobachter nicht, sodass die Bilder sofort geladen werden, und IE11 unterstützt das Element nicht, sodass wir auf die Standardeinstellung zurückgreifen Bild

Die Medienabfragen im Medienattribut sind beliebig und können passend gesetzt werden.

Der eingestellte Breitenschwellenwert beträgt 960 Pixel. Versuchen Sie, oberhalb und unterhalb dieser Breite neu zu laden, um entweder die mittlere (-m) oder die große (-l) Variation des heruntergeladenen Bilds zu sehen, wenn das Bild in den Darstellungsbereich gescrollt wird.

Codestift

<!-- Load images above the fold normally -->
<picture>
  <source srcset="https://stackoverflow.com/img/city-m.jpg" media="(max-width: 960px)">
  <source srcset="https://stackoverflow.com/questions/24025464/img/city-l.jpg" media="(min-width: 961px)">
  <img class="fade-in" src="https://stackoverflow.com/questions/24025464/img/city-l.jpg" alt="city"/>
</picture>

<picture>
  <source srcset="https://stackoverflow.com/img/forest-m.jpg" media="(max-width: 960px)">
  <source srcset="https://stackoverflow.com/img/forest-l.jpg" media="(min-width: 961px)">
  <img class="fade-in" src="https://stackoverflow.com/img/forest-l.jpg" alt="forest"/>
</picture>

<!-- Lazy load images below the fold -->
<picture class="lazy">
  <source data-srcset="https://stackoverflow.com/img/river-m.jpg" media="(max-width: 960px)">
  <source data-srcset="https://stackoverflow.com/https://stackoverflow.com/img/river-l.jpg" media="(min-width: 961px)">
  <img data-srcset="https://stackoverflow.com/https://stackoverflow.com/img/river-l.jpg" alt="river"/>
</picture>

<picture class="lazy">
  <source data-srcset="https://stackoverflow.com/img/desert-m.jpg" media="(max-width: 960px)">
  <source data-srcset="https://stackoverflow.com/https://stackoverflow.com/img/desert-l.jpg" media="(min-width: 961px)">
  <img data-srcset="https://stackoverflow.com/https://stackoverflow.com/img/desert-l.jpg" alt="desert"/>
</picture>

und die JS:

    document.addEventListener("DOMContentLoaded", function(event) {
   var lazyImages =[].slice.call(
    document.querySelectorAll(".lazy > source")
   )

   if ("IntersectionObserver" in window) {
      let lazyImageObserver = 
       new IntersectionObserver(function(entries, observer) {
          entries.forEach(function(entry) {
           if (entry.isIntersecting) {      
              let lazyImage = entry.target;
              lazyImage.srcset = lazyImage.dataset.srcset;
              lazyImage.nextElementSibling.srcset = lazyImage.dataset.srcset;
              lazyImage.nextElementSibling.classList.add('fade-in');
              lazyImage.parentElement.classList.remove("lazy");
             lazyImageObserver.unobserve(lazyImage);
            }
         });
        });

      lazyImages.forEach(function(lazyImage) {
       lazyImageObserver.observe(lazyImage);
      });
   } else {
     // Not supported, load all images immediately
    lazyImages.forEach(function(image){
        image.nextElementSibling.src = image.nextElementSibling.dataset.srcset;
      });
    }
  });

Ein letzter Gedanke ist, dass wenn Sie die Bildschirmbreite hin und her ändern, die Bilddateien immer wieder neu heruntergeladen werden. Wenn ich die obige Methode mit einer Cache-Überprüfung verknüpfen könnte, wäre dies Gold wert …

Auf web.dev weist Google darauf hin, dass Bild-Tags faul geladen werden können.
https://web.dev/browser-level-image-lazy-loading/

Bilder, die mit dem Element definiert werden, können auch verzögert geladen werden:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

Obwohl ein Browser entscheidet, welches Bild von einem der Elemente geladen wird, muss das Ladeattribut nur in das Fallback-Element aufgenommen werden.

1405800cookie-checkLazy Loading HTML5-Bildelement

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy