지연 로딩을 구현하는 데 사용되는 방법_지연 로딩을 구현하는 데 사용되는 방법-프런트엔드 Q&A-php.cn

지연 로딩을 구현하는 방법은 다음과 같습니다. 1. Intersection Observer API 2. 동적 가져오기 3. 사용자 정의 이벤트 리스너 등 자세한 소개: 1. Intersection Observer API는 요소와 뷰포트 사이의 위치 관계를 모니터링하는 데 사용할 수 있는 브라우저에서 제공하는 API입니다. 2. 동적 가져오기 등의 작업을 실행할 수 있습니다.

지연 로딩을 구현하는 방법

이 튜토리얼의 운영 체제: Windows 10 시스템, DELL G3 컴퓨터.

지연 로딩은 이미지, 비디오, 타사 스크립트 등과 같은 웹 페이지의 특정 리소스 로딩을 지연시키는 전략입니다. 지연 로딩을 통해 페이지의 초기 로딩 시간을 줄이고 페이지 로딩 속도와 성능을 향상시킬 수 있습니다. 다음은 몇 가지 일반적인 지연 로딩 방법입니다.

1. Intersection Observer API

Intersection Observer API는 브라우저에서 제공하는 API로, 요소와 뷰포트 간의 위치 관계를 모니터링하는 데 사용할 수 있습니다. 요소가 뷰포트에 들어가면 API는 리소스를 로드할 수 있는 콜백 함수를 트리거합니다. 다음은 Intersection Observer API를 사용한 지연 로딩의 예입니다.

<img data-src="image1.jpg" class="lazy-load" />  
  
<script>  
  const lazyImages = document.querySelectorAll(&#39;.lazy-load&#39;);  
    
  const observer = new IntersectionObserver((entries, observer) => {  
    entries.forEach(entry => {  
      if (entry.isIntersecting) {  
        const img = entry.target;  
        img.src = img.getAttribute(&#39;data-src&#39;);  
        observer.unobserve(img);  
      }  
    });  
  });  
    
  lazyImages.forEach(img => observer.observe(img));  
</script>

로그인 후 복사

위의 예에서 이미지 요소가 뷰포트에 들어가면 data-src 속성이 src 속성으로 대체되고 이미지 로딩이 시작됩니다. 이미지가 로드되면 Intersection Observer API는 요소 관찰을 중지합니다.

2. 동적 가져오기

동적 가져오기는 ES6에 도입된 모듈 로딩 방법으로,

저자별 최신 기사