Maison > Article > interface Web > Comment utiliser IntersectionObserver pour implémenter le chargement paresseux des images

Comment utiliser IntersectionObserver pour implémenter le chargement paresseux des images

一个新手original: 2017-09-29 09:34:271824parcourir

API :

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

Aller directement à le code source :

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

Après avoir exécuté le code, j'ai découvert que lorsque l'axe de défilement défile, il ne se déclenchera que lorsque le La zone 25edfb22a4f469ecb59f1190150159c6 est entièrement affichée. Requête http correspondante pour télécharger l'image.

Navigateurs compatibles :

ordinateur de bureau :

Mobile :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode d'extension régulière dans la syntaxe es6Article suivant：Méthode d'extension régulière dans la syntaxe es6

Articles Liés

Voir plus