cari

Rumah  >  Artikel  >  hujung hadapan web  >  如何利用IntersectionObserver实现图片懒加载

如何利用IntersectionObserver实现图片懒加载

一个新手
一个新手asal
2017-09-29 09:34:271839semak imbas

API：

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

直接上源码：


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

运行代码后发现，当滚动滚动轴时，只有当25edfb22a4f469ecb59f1190150159c6区域完全显示出来后才会触发相应的下载图片的http请求。

兼容浏览器：

desktop：

Mobile：

Atas ialah kandungan terperinci 如何利用IntersectionObserver实现图片懒加载. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：es6语法中正则扩展方法Artikel seterusnya：用插件实现二维码生成笔记

Artikel berkaitan

Lihat lagi