Lazy Load 업데이트

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

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

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

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

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

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