(스크롤바에 집중해서 보시면 확인이 더 쉽습니다.)

개인적으로 마음에 들진 않는 기능이라 업데이트를 꺼리고 있었는데, 주변에 lazy load가 뭔지 설명하고 어떠냐 물어보니 전부 호평이더라고요.
사실 서버 부하도 줄일 수 있고 로딩 속도의 향상도 가능해서 나름 괜찮은 스크립트인 건 맞으니, 한 번 시험 삼아 업데이트해봤습니다.

이미지 로딩을 시작하는 타이밍을 조금 앞당기니 그리 거슬리는 수준은 아니네요. 스크롤바나 스크롤 인디케이터가 덜컹거리는 건 어쩔 수 없고…

포스트 내용을 서버 단에서 읽어서 img src와 srcset을 모두 data-src, data-srcset으로 변경한 뒤 JS가 해당 이미지가 뷰포트에 있는지 없는지 계산해서 src와 srcset으로 다시 변경하는 방법을 사용했는데, 정규표현식으로 src와 srcset 일일이 변경하는 게 맞는 방법일지 모르겠네요.

댓글에 남긴 사진 / 영상에도 적용했습니다.
imgur가 좀 느린 편이라, 항상 좀 마음이 쓰였는데, 이제야 좀 마음에 평화가 오네요.

헤더 카테고리엔 예전에도 비슷한 시도를 했었는데, 로딩하는 게 너무 티가 나서 별로라 이번에도 여긴 생략했습니다.

profile

Kiss Me ♥에게 댓글 남기기 댓글 취소

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)

  1. 아~ 임그루 공감해요 ㅎㅎ
    imgur가 로딩이 조금 걸릴때가 종종 있어
    저는 최근에 그냥 테스트 블로그에 이미지 올리고
    그 주소 사용해요 🙂

    https://t1.daumcdn.net/cfile/tistory/99E168445DADB78427?original

    1. 저도 imgur에 있는 이미지들을 싹 다른 데로 옮겨야 하나 싶네요.
      시작하면 수정해야 할 게 한둘이 아니기도 하고, 마땅한 대체재도 찾기가 힘들어서 아직 시작은 못 하고 있습니다. ㅠㅠ

      https://i.imgur.com/F4IIAc4.mp4