지연 로딩을 구현하는 방법

지연 로딩을 구현하는 방법은 다음과 같습니다. 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에 도입된 모듈 로딩 방법으로, 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 모듈을 미리 로드하지 않고도 런타임에 모듈을 동적으로 로드할 수 있습니다. 동적 가져오기를 통해 요청 시 타사 스크립트나 모듈을 로드할 수 있습니다. 다음은 지연 로딩을 구현하기 위해 동적 가져오기를 사용하는 예입니다.

import('module1.js')  
  .then(module => {  
    // 使用 module  
  })  
  .catch(err => {  
    // 处理加载失败  
  });

위 예에서 module1.js는 필요할 때 한 번만 로드됩니다. 이러한 방식으로 한 번에 많은 수의 스크립트를 로드하여 발생하는 페이지 성능 문제를 피할 수 있습니다.

3. 맞춤 이벤트 리스너

브라우저에서 제공하는 API를 사용하는 것 외에도 맞춤 이벤트 리스너를 통해 지연 로딩을 구현할 수도 있습니다. 리소스를 로드해야 하는 경우 사용자 지정 이벤트를 트리거한 다음 이벤트 리스너에서 리소스를 로드하는 작업을 수행할 수 있습니다. 다음은 지연 로딩을 구현하기 위해 사용자 정의 이벤트 리스너를 사용하는 예입니다.

<img data-src="image2.jpg" class="lazy-load" />  
  
<script>  
  const lazyImages = document.querySelectorAll(&#39;.lazy-load&#39;);  
  const lazyImageEvent = new CustomEvent(&#39;lazy-load&#39;);  
    
  lazyImages.forEach(img => {  
    img.addEventListener(&#39;lazy-load&#39;, () => {  
      img.src = img.getAttribute(&#39;data-src&#39;);  
    });  
    img.dispatchEvent(lazyImageEvent); // 触发自定义事件，开始加载图片  
  });  
</script>

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