Méthode d'implémentation du chargement différé de l'image Intersection Observer-js tutoriel-php.cn

Méthode d'implémentation du chargement différé de l'image Intersection Observer

小云云

Libérer： 2018-01-31 13:17:29

original

1328 Les gens l'ont consulté

Cet article vous apporte principalement un exemple d'IntersectionObserver implémentant le chargement paresseux d'images. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

API :

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

Aller directement au 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>

Copier après la connexion

Après avoir exécuté le code, c'était a constaté que lorsque l'axe de défilement défile, ce n'est que lorsque la zone

est entièrement affichée que la requête http correspondante pour télécharger l'image sera déclenchée.

Navigateurs compatibles :

ordinateur de bureau :