Heim > Artikel > Web-Frontend > Intersection Observer-Implementierungsmethode für verzögertes Laden von Bildern

Intersection Observer-Implementierungsmethode für verzögertes Laden von Bildern

小云云Original: 2018-01-31 13:17:291296Durchsuche

Dieser Artikel enthält hauptsächlich ein Beispiel dafür, wie IntersectionObserver das verzögerte Laden von Bildern implementiert. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

API:

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Gehe direkt zum Quellcode:

<!DOCTYPE html>
<html>
  <header>
    <style>
      .list-item{
        height: 400px; 
        margin: 5px; 
        background-color: lightblue; 
        list-style: none;
      }
    </style>
  </header>
  <body>
    <li class="list-item"><img class="list-item-img" alt="loading" src=&#39;./images/icon1.png&#39;></li>
    <li class="list-item"><img class="list-item-img" alt="loading" src=&#39;./images/icon2.png&#39;></li>
    <li class="list-item"><img class="list-item-img" alt="loading" src=&#39;./images/icon3.png&#39;></li>
    <li class="list-item"><img class="list-item-img" alt="loading" src=&#39;./images/icon4.png&#39;></li>
    <li class="list-item"><img class="list-item-img" alt="loading" src=&#39;./images/icon5.png&#39;></li>
    <li class="list-item"><img class="list-item-img" alt="loading" src=&#39;./images/icon6.png&#39;></li>

    <script>
      var observer = new IntersectionObserver(function(changes) {
        console.log(changes);
        changes.forEach(function(element, index) {
          // statements
          if (element.intersectionRatio > 0 && element.intersectionRatio <= 1) {
            element.target.src = element.target.dataset.src;
          }
        });
      });


      function addObserver() {
        var listItems = document.querySelectorAll(&#39;.list-item-img&#39;);
        listItems.forEach(function(item) {
          observer.observe(item);
        });
      }

      addObserver();
    </script>
  </body>
</html>

Nach dem Ausführen des Codes war es soweit Ich habe festgestellt, dass beim Scrollen der Bildlaufachse nur dann die entsprechende HTTP-Anfrage zum Herunterladen des Bildes ausgelöst wird, wenn der 25edfb22a4f469ecb59f1190150159c6-Bereich vollständig angezeigt wird.

Kompatible Browser:

Desktop:

Mobil:

Verwandt Empfehlungen:

Verwenden Sie das Vue-Lazyload-Plug-in, um Bilder langsam in Vue zu laden

Lazy Loading von Bildern

JS-Implementierung des Bild-Lazy-Loading-Tutorials

Das obige ist der detaillierte Inhalt vonIntersection Observer-Implementierungsmethode für verzögertes Laden von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielanalyse einer Vue-Quellcode-EintragsdateiNächster Artikel：Beispielanalyse einer Vue-Quellcode-Eintragsdatei

In Verbindung stehende Artikel

Mehr sehen