Image Lazy Loading 기법으로 웹 성능 최적화하기 > 솔루션(그누/영카트) 팁자료실

본문 바로가기
사이트 내 전체검색

회원로그인

회원가입

오늘 본 상품 0

없음


솔루션(그누/영카트) 팁자료실

기타 Image Lazy Loading 기법으로 웹 성능 최적화하기

페이지 정보

profile_image
작성자 관리자
댓글 0건 조회 2,492회 작성일 22-05-11 11:09

본문

<style>

img {

  background: #6ff9ff;

  width: 500px;

  height: 700px;

  display: block;

  margin: 10px auto;

  border: 0;

}

</style>



<div>

<img src="https://images.unsplash.com/photo-1635420280816-c0dc0ee8a7a7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />

<img src="https://images.unsplash.com/photo-1632904660558-622c91a82df8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80" />

<img src="https://images.unsplash.com/photo-1634708231931-79b5b92c0a2e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80" />

<img class="lazy" data-src="https://images.unsplash.com/photo-1519401964-4613266b8d1f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80" />

<img class="lazy" data-src="https://images.unsplash.com/photo-1542321882-d8cc271b7e84?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80" />

<img class="lazy" data-src="https://images.unsplash.com/photo-1549074699-482412142536?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80" />

<img class="lazy" data-src="https://images.unsplash.com/photo-1518387801569-c9372e7f2dd9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80" />

<img class="lazy" data-src="https://images.unsplash.com/photo-1600775508114-5c30cf911a40?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />

<img class="lazy" data-src="https://images.unsplash.com/photo-1602055300980-ad1377a88496?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />

</div>


<script>

const useLazyLoading = () => {

  const imgs = document.querySelectorAll('.lazy');


  const observerCallback = (entries, observer) => {

    entries.forEach(({ isIntersecting, intersectionRatio, target }) => {

      if (isIntersecting && intersectionRatio > 0) {

        target.src = target.dataset.src;

        target.classList.remove("lazy");

        observer.unobserve(target);

      }

    });

  };


  const io = new IntersectionObserver(observerCallback);

  imgs.forEach((img) => io.observe(img));

};


useLazyLoading();

</script>


댓글목록

등록된 댓글이 없습니다.


네이버블로그 인스타그램 네이버까페 유튜브 네이버밴드 페이스북 트위터 카카오스토리

사이트 정보

회사명 : 회사명 / 대표 : 대표자명
주소 : OO도 OO시 OO구 OO동 123-45
사업자 등록번호 : 123-45-67890
전화 : 02-123-4567 팩스 : 02-123-4568
통신판매업신고번호 : 제 OO구 - 123호
개인정보관리책임자 : 정보책임자명

접속자집계

오늘
106
어제
104
최대
331
전체
30,396
Copyright © 소유하신 도메인. All rights reserved.