Intersection Observer-Implementierungsmethode für verzögertes Laden von Bildern-js-Tutorial-php.cn

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

小云云

Freigeben： 2018-01-31 13:17:29

Original

1312 Leute haben es durchsucht

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 Login kopieren

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

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