js의 이미지 지연 로딩 구현 원리에 대한 자세한 설명

이미지 지연 로딩의 장점:
최적화된 코드,

서버측 압력 감소,

주문형 서버 로드;

lazy 이미지 로딩 원리:

먼저 이미지의 src를 동일한 이미지로 설정하거나 설정하지 않고 img 태그에 특수 속성을 설정합니다. 예: data-src는 실제 미리보기 주소를 저장하는 데 사용됩니다. 이미지의 표시 영역이 아닌 경우 동일한 그림을 표시하거나 그림을 직접 표시하지 않으면 이때 그림이 표시 영역에 들어갈 때 data-src의 값을 src에 할당합니다. 그런 다음 http 요청을 보냅니다.

키: 이미지가 가시 영역에 들어가는지 결정(키 기능)

페이지의 가시 영역 너비: document.body.clientWidth

페이지의 가시 영역 높이 webpage: document.body.clientHeight; ： document.body.offsetWidth (가장자리 너비 포함)

웹페이지 표시 영역 높이: document.body.offsetHeight (가장자리 너비 포함) ;

웹페이지의 전체 텍스트 너비: document.body.scrollWidth;

웹페이지의 전체 텍스트 높음: document.body.scrollHeight;

스크롤되는 웹페이지의 높이: document.body.scrollTop

스크롤되는 웹페이지의 왼쪽: document.body.scrollLeft;

웹페이지의 주요 텍스트 부분: window.screenTop;

웹페이지의 텍스트 부분 왼쪽: window.screenLeft

offsetParent 요소 상단을 기준으로 한 현재 요소의 거리: HTMLElement.offsetTop;

브라우저 창의 뷰포트 높이(픽셀 단위): window.innerHeight(가로 스크롤 막대가 있는 경우 스크롤도 포함) 바 높이)

(권장 튜토리얼:

js 튜토리얼

)

코드 구현:

html part

<div>
  <img src="./img/1.jpg" data-src="./img/1.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/2.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/3.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/4.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/5.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/6.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/7.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/8.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/9.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/10.jpg" alt="">
 </div>

js part

window.onload = () => {
   // 获取某节点与浏览器顶部的距离
   function getTop(e) {
    if (!e) return
    return e.offsetTop
   }
   let imgs = document.getElementsByTagName('img')
   function lazyLoading(imgs) {
    // 可是区域高度
    let innerHeight = window.innerHeight;
    // 滚动区域高度
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    for (let i = 0; i < imgs.length; i++) {
     // 图片距离顶部的距离大于可视区域和滚动区域之和时加载
     if (scrollTop + innerHeight > getTop(imgs[i])) {
      imgs[i].src = imgs[i].getAttribute(&#39;data-src&#39;)
     }
    }
   }
   lazyLoading(imgs)
   window.onscroll = () => {
    lazyLoading(imgs)
   }
  }

위 내용은 js의 이미지 지연 로딩 구현 원리에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!