집 > 기사 > 웹 프론트엔드 > IntersectionObserver를 사용하여 이미지 지연 로딩을 구현하는 방법

IntersectionObserver를 사용하여 이미지 지연 로딩을 구현하는 방법

一个新手원래의: 2017-09-29 09:34:271839검색

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 요청이 트리거된다는 것을 발견했습니다.

호환 브라우저:

데스크톱:

모바일:

위 내용은 IntersectionObserver를 사용하여 이미지 지연 로딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：es6 구문의 일반 확장 방법다음 기사：es6 구문의 일반 확장 방법