deal.png

 

 

수익성 컨텐츠로 정보를 제공하는 페이지를 새로 만들었는데요. 이게 살짝 고민거리가 하나 있었습니다.

욕심에는 최대 갯수 100개씩 화면에 뿌리고 싶은데 이미지를 재처리 하지 않으면 굉장히 큰 이미지를 100개를 받아와서 브라우저에 출력해줘야 하는데요.

 

이게 아주 극히 일부 느린 인터넷 사용자에게는 좀 문제가 될 소지도 있거든요.

 

제가 카테고리별로 구분해서 데이터를 가져와서 출력해주기 위해서 약간의 꼼수도 써서  ajax로 카테고리별로 가져오는 방식을 취했는데 lazy load로 뷰포트 영역의 이미만 출력해주어 많은 이미지로 인한 로딩 부담을 줄이려고 했는데 실패했었습니다.

 

 

그런데 오늘 다시 시도를 해보려다가 성공이 되었습다. 

 

 

https://rxtip.kr/cuopang_deal

 

 

처음에는 ajax 구성이라 현재 페이지로 ajax로  html 가져오니 안되나보다 생각하고 말았는데..

오늘 적용하고 그냥 되길래 보니까 제가 처음에 정신없이 하다가 src 를 data-src 로 바꾸는 것을 하지도 않았던 것이었네요 ㅋㅋㅋ

 

어찌 되었던 많은 이미지를 작게 재처리 하지 않고도 큰 부담 주지 않으면서 정보제공을 할 수 있게 되어 약간의 애로사항이 해소가 된 기분 좋은 토요일이네요 ㅎㅎ 

글쓴이 웹지기

profile
XE와 라이믹스를 운영하며 알게된 노하우를 공유합니다.
https://rxtip.kr/ 라이믹스 꿀팁
  • profile
    저도 예전에 게시판 스킨에 lazyload를 추가한 적이 있었는데 최초 접속 시 서버 측에서 썸네일을 생성하는 과정에서 이미 딜레이가 걸려서 결국 느려지는건 똑같더군요ㅠ 이미지를 요청하는 순간 썸네일이 생성되고 레이지로드랑 결합되면 좀 더 좋을 것 같은데 아직은 어려운 것 같습니다.
  • profile profile
    썸네일 자체를 생성하지 않아서 오히려 더 좋아요 ㅎㅎ 그래서 lazy load가 절실히 필요했습니다.
    api쪽에서 주는 이미지를 그대로 100개 를 출력합니다. 근데 이미지가 커요. 그래서 보고 싶은 만큼만 출력하니 좋네요.
  • profile profile
    Ajax로 이미지 요청 때마다 썸네일을 생성하도록 구현하셨나보군요. 방문해보니 굉장히 빠르네요ㅋㅋ
  • profile profile
    섬네일 없이 원본을 제공합니다. 게시판은 아니에요.
  • profile
    축하드립니다!!
  • profile profile

    감사합니다. 앓던 이 하나 뺀 기분이네요 ㅋ

    어이 없는건 처음부터 잘 되는거였.... ㅎ