Heim > Artikel > Web-Frontend > So verwenden Sie IntersectionObserver, um das verzögerte Laden von Bildern zu implementieren

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

一个新手Original: 2017-09-29 09:34:271821Durchsuche

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>

Nachdem ich den Code ausgeführt habe, habe ich festgestellt, dass die Bildlaufachse beim Scrollen nur dann ausgelöst wird, wenn die Der 25edfb22a4f469ecb59f1190150159c6-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!

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：Reguläre Erweiterungsmethoden in der es6-SyntaxNächster Artikel：Reguläre Erweiterungsmethoden in der es6-Syntax

In Verbindung stehende Artikel

Mehr sehen