JS 이미지 게 으 름 로드(lazyload)과정 상세 설명 실현

5895 단어 JS그림.게으르다lazyload
그림 이 많은 페이지 에 대해 게 으 른 로 딩 을 사용 하면 페이지 로 딩 속 도 를 크게 향상 시 키 고 사용자 체험 을 향상 시 킬 수 있다.
게 으 름 로드 의 의미(게 으 름 로드 를 왜 사용 하 는 지)
페이지 로 딩 속도 에 가장 큰 영향 을 미 치 는 것 은 그림 입 니 다.일반적인 그림 한 장 은 몇 M 의 크기 에 달 할 수 있 고 코드 는 몇 십 KB 에 불과 할 수도 있 습 니 다.페이지 그림 이 많 을 때 페이지 의 로드 속도 가 느 리 고 몇 S 시간 동안 페이지 가 로드 되 지 않 아 많은 사용 자 를 잃 을 수 있 습 니 다.
따라서 그림 이 너무 많은 페이지 에 대해 페이지 로 딩 속 도 를 가속 화하 기 위해 서 는 화면 에 나타 나 지 않 은 그림 을 불 러 오지 않 고 시각 영역 으로 스크롤 한 후에 불 러 와 야 할 때 가 많 습 니 다.이렇게 하면 페이지 로 딩 성능 이 크게 향상 되 고 사용자 체험 도 향상 된다.
의 원리
페이지 에 있 는 img 태그 src 를 작은 그림 이나 src 를 비어 있 는 것 으로 가리 키 고 데이터-src(이 속성 은 사용자 정의 이름 을 지정 할 수 있 습 니 다.저 는 데이터-src)속성 으로 실제 그림 을 가리 킵 니 다.src 는 기본 그림 을 가리 키 며,그렇지 않 으 면 src 가 비어 있 을 때 서버 에 요청 을 보 냅 니 다.loading 주 소 를 가리 킬 수 있 습 니 다.
주:그림 은 너비 와 높이 를 지정 해 야 합 니 다.<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />페이지 를 불 러 올 때 시각 영역 에 있 는 img 태그 의 data-src 속성 값 을 src 에 마이너스 로 한 다음 스크롤 이 벤트 를 감청 하여 사용자 가 볼 그림 을 불 러 옵 니 다.이렇게 하면 게 으 른 로드 를 실현 할 수 있다.
코드

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    img {
      display: block;
      margin-bottom: 50px;
      width: 400px;
      height: 400px;
    }
  </style>
</head>

<body>

  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
  <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">

</body>
JavaScript

<script>
  var num = document.getElementsByTagName('img').length;
  var img = document.getElementsByTagName("img");
  var n = 0; //          ，               

  lazyload(); //                

  window.onscroll = lazyload;

  function lazyload() { //        
    var seeHeight = document.documentElement.clientHeight; //      
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //         
    for (var i = n; i < num; i++) {
      if (img[i].offsetTop < seeHeight + scrollTop) {
        if (img[i].getAttribute("src") == "default.jpg") {
          img[i].src = img[i].getAttribute("data-src");
        }
        n = i + 1;
      }
    }
  }
</script>
jQuery

<script>
  var n = 0,
    imgNum = $("img").length,
    img = $('img');

  lazyload();

  $(window).scroll(lazyload);

  function lazyload(event) {
    for (var i = n; i < imgNum; i++) {
      if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
        if (img.eq(i).attr("src") == "default.jpg") {
          var src = img.eq(i).attr("data-src");
          img.eq(i).attr("src", src);

          n = i + 1;
        }
      }
    }
  }
</script>
절 류 함수 로 성능 최적화
스크롤 이벤트 에 함 수 를 직접 연결 하면 페이지 가 굴 러 갈 때 함수 가 고주파 로 작 동 됩 니 다.이것 은 브 라 우 저의 성능 에 매우 영향 을 줍 니 다.
나 는 트리거 주파 수 를 제한 하여 성능 을 최적화 시 키 고 싶다.
절 류 함수:한 함수 만 N 초 안에 실행 할 수 있 습 니 다.다음은 간단 한 절 류 함수 입 니 다.

//        
//fun       
//delay   
//time  time         
function throttle (fun, delay, time) {
 let timeout

 let startTime = new Date()

 return function () {
  let context = this

  let args = Array.prototype.slice.call(arguments)

  let curTime = new Date()

  clearTimeout(timeout)
  if (curTime - startTime >= time) {
   //               ，   handler
   fun.apply(context, args)
   startTime = curTime
  } else {
   //        ，       
   timeout = setTimeout(function () {
    fun.apply(context, args)
   }, delay)
  }
 }
};
//        scroll      handler
function lazyload(event) {}
//        
window.addEventListener('scroll',throttle(lazyload,500,1000));
떨 기 함수 로 성능 최적화
떨 기 비교 절 류 함 수 는 조금 간단 해 야 합 니 다.떨 기 는 함 수 를 지연 시 키 는 것 이 고 절 류 는 떨 기 보다 하나 더 많 습 니 다.일정 시간 에 한 번 씩 실행 해 야 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Javascript 비동기 프로 그래 밍 async 실현 과정 상세 설명
PHP 와 javascript 의 여러 선택 처리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage