JavaScript를 이용한 이미지의 지연 로딩 방법 소개

이미지 지연 로딩 및 지연 로딩이라고도 하는 이미지 지연 로딩은 사용자가 이미지를 사용해야 할 때 이미지를 로딩하는 것을 의미합니다. 이는 요청을 줄이고, 대역폭을 절약하며, 페이지 로딩 속도를 높이는 동시에 서버 부담을 줄일 수도 있습니다. 이번 글을 통해 전해드릴 내용은 이미지 레이지 로딩 구현 방법을 공유해보겠습니다. 관심있는 친구들은 함께 살펴보세요

Definition

이미지 레이지 로딩을 지연 로딩, 레이지 로딩이라고도 합니다. 이미지 로딩. 이는 사용자가 이미지를 사용해야 할 때 이미지를 로딩하는 것을 의미합니다. 이는 요청을 줄이고 대역폭을 절약하며 페이지 로딩 속도를 향상시키고 서버 부담을 상대적으로 줄일 수 있습니다.

지연 로딩은 사용자 경험을 향상시키고 한 번에 많은 양의 데이터를 로드하는 것을 방지하는 대신 사용자 요구에 따라 리소스를 요청하는 프로그램의 표현입니다.

구현의 어려움

은 특정 사진이 사용자에게 필요한 리소스인지 판단하는 것입니다. 브라우저에서는 사용자가 시각적 영역의 리소스를 필요로 하므로 사진에 해당 사진이 있는지 여부만 판단하면 됩니다. 가시 영역에 그림이 표시되면 그림의 실제 주소를 얻어서 그림에 할당하면 됩니다. (그림의 너비와 높이를 지정해야 하며 패딩을 사용할 수 있습니다.) ).

가시 영역에 존재하는지 판단

브라우저 뷰포트 높이

로드할 리소스와 뷰포트 상단 사이의 거리

위의 두 가지 점을 통해 이미지가 가시 영역에 있는지 판단할 수 있습니다.

var nodes = document.querySelectorAll('img[src]'),
  elem = nodes[0],
  rect = elem.getBoundingClientRect(),
  vpHeight = document.documentElement.clientHeight;
if(rect.top < vpHeight && rect.bottom>=0) {
 console.log(&#39;show&#39;)
}

re 그런 다음 그림의 실제 주소를 얻으십시오. r

<img src="loading.gif" alt="" src="1.gif">
...
<script data-filtered="filtered">
  var src = elem.dataset.src;
</script>

실제 주소를 Picture에 실제 주소를 표시합니다.

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