So verwenden Sie IntersectionObserver, um das verzögerte Laden von Bildern zu implementieren-js-Tutorial-php.cn

So verwenden Sie IntersectionObserver, um das verzögerte Laden von Bildern zu implementieren

一个新手

Freigeben： 2017-09-29 09:34:27

Original

1850 Leute haben es durchsucht

API:

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

Gehe direkt zu der 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

Nachdem ich den Code ausgeführt habe, habe ich festgestellt, dass die Bildlaufachse beim Scrollen nur dann ausgelöst wird, wenn die Der

-Bereich wird vollständig angezeigt.

Kompatible Browser:

Desktop:

Mobil:

Das obige ist der detaillierte Inhalt vonSo verwenden Sie IntersectionObserver, um das verzögerte Laden von Bildern zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!