로그인

검색

Extra Form
추천지수 6

최근 사이트에 부착해서 수익을 낼 수 있도록 개발한 결과물 중 api로 부터 받아온 상품정보 100개를 출력해 주어 해당 상품의 구매로 수익이 발생할 수 있는 것을 사이트에 적용을 했습니다. 그런데 딱 한가지 문제가 맘에 걸리는 부분이 있었는데 100개나 되는 이미지가 섬네일 형태의 작은 이미지가 아닌 본문에 사용될 정도의 큰 이미지라는 점 입니다.

 

인터넷 환경이 아주 여락한 곳의 사용자의 경우 한꺼번에 100개나 되는 제법 용량이 되는 이미지를 내려 받다 보니 소화가 되지 못해 이미지를 내려받지 못하고 종료되어 버립니다. 엑박이 뜨는 거죠.

 

그런데 이 경우는 아주 제한적인 사용자에게 나타나는 문제라 꼭 해결해야 한다기 보다는 가급적 해결해야할 문제 정도가 될텐데 그보다 조금 더 걸리는 것은 보지도 않을 아래 많은 이미지를 모두 내려받는 부분이 방문자의 데이터 소진이 다소 미안하다는 생각이 들었습니다.

 

그래서 많이 알려진 lazy load 기법을 사용해보려고 검색을 하다가 발견한

 

https://github.com/ApoorvSaxena/lozad.js

 

 

 

lozad-banner.jpg

 

위 라이브러리를 사용해서 뷰포트에 보이는 이미지만 내려 받는 lazy load를 구현해서 원하는대로 아주 완벅하게 처리가 되었습니다.

한꺼번에 모든 이미지를 요청하지 않아서 엑박이 뜨는 일도 없고 실제 보지 않는 이미지도 미리 내려받지 않아 데이터 낭비도 없어졌구요.

 

 

위 링크에서 자료를 다운받아 필요한  lozad.js 파일만 업로드해서 사용을 하던가 아니면 CDN에 올려진 파일을 불러서 사용할 수 있습니다.

 

<img src="images/img-01.jpg">
<img src="images/img-02.jpg">
<img src="images/img-03.jpg">
<img src="images/img-04.jpg">
<img src="images/img-05.jpg">
<img src="images/img-06.jpg">

 

위와 같이 이미지를 불러오는 코드가 있다면 

 

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

이렇게 CDN에서 js 파일을 불러오거나 혹은 서버에 올려진 파일을 직접 로딩해줍니다.

 

<load target="lozad.js" /> 업로드 경로에 따라 달라지겠죠.

 

 

그리고 위 img 소스에 class를 추가하고 src 를 data-src 로 변경해야 합니다.

 

<img data-src="images/img-01.jpg" class="lozad">
<img data-src="images/img-02.jpg" class="lozad">
<img data-src="images/img-03.jpg" class="lozad">
<img data-src="images/img-04.jpg" class="lozad">
<img data-src="images/img-05.jpg" class="lozad">
<img data-src="images/img-06.jpg" class="lozad">

 

 

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

이런식으로요.

 

기존에 class가 있다면 그 옆에 한칸 띄우고 추가해 주면 되겠죠.

 

 

출력하는 이미지의 사이즈가 css에서 미리 고정되어 있는 것이라면 따로 img에 css를 적용해주지 않아도 되지만 그렇지 않은경우는 살짝 추가해줘야 할 것 입니다. 저는 고정된 사이즈로 출력하는 형태라 미리 css에 가로,세로가 지정된 경우라 따로 해주지 않았습니다.

 

img { max-width: 100%; display: block;} 이런식으로 이미지에 적용해보세요. 이미지에 css를 아무것도 적용하지 않고 테스트는 해보지 않았습니다.

 

 

그리고 이미지 출력되는 곳보다 아래에 

<script>
    const observer = lozad();
    observer.observe();
</script>

 

스크립트를 추가해서 lozad()가 실행될 수 있도록 해줍니다.

 

 

<img data-src="images/img-01.jpg" class="lozad">
<img data-src="images/img-02.jpg" class="lozad">
<img data-src="images/img-03.jpg" class="lozad">
<img data-src="images/img-04.jpg" class="lozad">
<img data-src="images/img-05.jpg" class="lozad">
<img data-src="images/img-06.jpg" class="lozad">

 

~~~

 

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

 

<script>
    const observer = lozad();
    observer.observe();
</script>

 

 

이런 모습이 되는 것입니다.

 

이렇게 하면 화면에 보이는 영역의 이미지만 불러오게 되어서 쾌적하고 불편없이 많은 양의 이미지를 출력할 수 있습니다.

TAG •

Who's 꿀팁관리소장

profile

라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.

커뮤니티를 운영하면서 필요한 간단한 것을 만들고 공유하고 운영에 필요한 노하우나 기술을 공유합니다.

하지만 따로 의뢰를 받거나 하지 않으니 문의 등을 하실 필요는 없습니다.

Atachment
첨부 '0'

라이믹스 팁(76)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. 라이믹스 회원(팝업)메뉴에 아이콘 추가해주기

    Date2021.05.11 Category기능 Views54 Votes0
    Read More
  15. Read More
  16. Read More
  17. Read More
  18. 신규 회원 가입 사실만 메일로 전달 받고 싶을때

    Date2021.05.06 Category기능 Views45 Votes0
    Read More
  19. Read More
  20. Read More
  21. 스케치북5 스킨 검색어 하이라이트 효과 주기

    Date2021.05.02 Category기능 Views52 Votes0
    Read More
  22. Read More
  23. Read More
  24. 댓글 주소 클립보드에 복사하는 기능 추가하기 10

    Date2021.04.25 Category기능 Views46 Votes0
    Read More
  25. Read More
  26. Read More
  27. Read More
  28. 스케치북 빵조각 '메뉴 아이콘' 적용해 보았습니다.

    Date2021.04.21 Category기능 Views34 Votes0
    Read More
  29. Read More
  30. 본문 게시글 주소 복사 버튼 여러곳에 추가해 주기 17

    Date2021.04.10 Category기능 Views49 Votes0
    Read More
  31. input 입력창 크기가 작거나 이상한가요? css box-sizing

    Date2021.04.09 Category기타 Views43 Votes0
    Read More
  32. 본문 게시글 주소 클립보드 복사 기능 만들기 8

    Date2021.04.06 Category기능 Views73 Votes0
    Read More
Board Pagination Prev 1 2 3 Next
/ 3