Lazy Loading

Jeremy Wagner
Rachel Andrew

Wie bei Bildelementen können Sie Videos auch per Lazy Loading laden. Videos werden normalerweise mit dem <video>-Element geladen, obwohl ein alternative Methode mit <img> hat bei der Umsetzung eingeschränkt). Wie das Lazy Loading von <video> funktioniert, hängt vom für den Anwendungsfall. Lassen Sie uns einige Szenarien besprechen, Lösung zu finden.

Videos ohne automatische Wiedergabe

Videos, bei denen die Wiedergabe vom Nutzer initiiert wird, d. h. Videos, die nicht automatisch wiedergeben, wobei preload angegeben wird. Attribut auf das <video>-Element kann wünschenswert sein:

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

Im Beispiel oben wird ein preload-Attribut mit dem Wert none verwendet, um Browser zu verhindern, keine Videodaten vorab laden. Das poster wird dem <video>-Element ein Platzhalter zugewiesen, der den Raum einnimmt, während das Video geladen wird. Der Grund dafür ist, Das Standardverhalten beim Laden von Videos kann von Browser zu Browser variieren:

  • In Chrome war preload standardmäßig auto. Seit Chrome 64 ist dies jetzt der Fall. ist standardmäßig metadata. Dennoch ist in der Desktopversion von Chrome ein Teil Das Video wird möglicherweise mithilfe des Content-Range-Headers vorab geladen. Andere Chromium-basierte Browser und Firefox verhalten sich ähnlich.
  • Wie bei Chrome auf dem Desktop wird auch in den Desktop-Versionen von Safari 11.0 vorab ein Bereich des Videos. Ab Version 11.2 werden nur die Videometadaten vorab geladen. In Safari unter iOS werden Videos vorab geladen.
  • Wenn der Datensparmodus aktiviert ist, wird für preload standardmäßig none verwendet.

Da das Browser-Standardverhalten in Bezug auf preload nicht in Stein gemeißelt ist, ist es wahrscheinlich die beste Wahl. In diesem Fall, wenn der Nutzer der Wiedergabe ist die einfachste Möglichkeit, das Laden eines Videos aufpreload="none" Plattformen. Das Attribut preload ist nicht die einzige Möglichkeit, das Laden zu verzögern von Videoinhalten. Schnelle Wiedergabe mit Video Beim Vorabladen erhältst du einige Ideen und Einblicke in die Arbeit mit der Videowiedergabe in JavaScript.

Leider erweist es sich nicht als nützlich, wenn Sie Videos anstelle von animierte GIFs, die wir als Nächstes behandeln.

Videos, die als Ersatz für animierte GIFs dienen

Animierte GIFs werden zwar häufig verwendet, sind aber im Vergleich zu Video-Äquivalenten in einem insbesondere in Bezug auf die Dateigröße. Animierte GIFs können sich von mehreren Megabyte an Daten. Videos mit ähnlicher Bildqualität viel kleiner sein.

Die Verwendung des <video>-Elements als Ersatz für ein animiertes GIF funktioniert nicht so einfach als <img>-Element. Animierte GIFs haben drei Eigenschaften:

  1. Sie werden beim Laden automatisch abgespielt.
  2. Sie wiederholen sich kontinuierlich (obwohl das nicht immer Fall).
  3. Sie haben keinen Audiotrack.

Wenn Sie dies mit dem Element <video> erreichen, sieht das in etwa so aus:

<video autoplay muted loop playsinline>
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

Die Attribute autoplay, muted und loop sind selbsterklärend. playsinline ist für die automatische Wiedergabe erforderlich in iOS Jetzt haben Sie eine als GIF-Datei ersetzen, die plattformübergreifend funktioniert. Aber wie zum Lazy Loading. Ändern Sie zuerst das <video>-Markup entsprechend:

<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src="one-does-not-simply.webm" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>

Sie werden bemerken, dass die neue Spalte poster mit dem Sie einen Platzhalter angeben können, der den Bereich des <video>-Elements einnimmt bis das Video per Lazy Loading geladen wird. Wie bei den <img>-Beispielen für das Lazy Loading die Video-URL im Attribut data-src auf jedem <source> -Elements. Danach kannst du JavaScript-Code wie den Beispiele für Lazy Loading für beobachtbare Bilder bei Kreuzungen:

document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});

Wenn Sie ein <video>-Element per Lazy Loading laden, müssen Sie alle untergeordneten Elemente <source>-Elemente und wandeln ihre data-src-Attribute in src-Attribute um. Einmal muss das Laden des Videos durch den Aufruf der Methode Die load-Methode des Elements, nach der die Medien automatisch wiedergegeben werden gemäß dem Attribut autoplay.

Mit dieser Methode haben Sie eine Videolösung, die das Verhalten von animierten GIFs emuliert. Die Datennutzung ist jedoch geringer wie bei animierten GIFs, und diese Inhalte per Lazy Loading laden.

Lazy Loading von Bibliotheken

Die folgenden Bibliotheken können Ihnen beim Lazy Loading von Videos helfen:

  • vanilla-lazyload und lozad.js ist extrem schlanke Optionen. die nur Intersection Observer verwenden. Sie sind leistungsstark, müssen mit Polyfill nachgerüstet werden, bevor du sie in älteren Browsern verwenden kannst.
  • yall.js ist eine Bibliothek, die Intersection Observer und Fallback auf Event-Handler. Außerdem kann mithilfe eines data-poster-Attributs ein Lazy Loading für poster-Videobilder durchgeführt werden.
  • Wenn Sie eine React-spezifische Lazy Loading-Bibliothek benötigen, react-lazyload. Während es und zwar nicht Intersection Observer, sondern dafür, mit React Bilder für diejenigen zu laden, die gewöhnt sind, Anwendungen zu entwickeln.

Jede dieser Lazy-Loading-Bibliotheken ist gut dokumentiert und enthält viel Markup Mustern für Ihre verschiedenen Lazy-Loading-Versuchen.