JS - LazyLoad (이벤트리스너로 구현)
LazyLoad, 디바운싱, 쓰로틀링 웹 페이지를 열 때 img태그의 src속성은 현재 뷰 포트가 어디있건간에 이미지소스를 다운로드받는다. 만약 몇천 몇만의 이미지태그가 있으면 이를 다 다운받을 때까지 엄청난 시간이 들 것이다.(사용자가 보고있지 않아도.) 따라서 이런 리소스낭비를 줄이기 위해 사용되는 것이다. 예시로는 ~~유투브에서 스크롤링할 때 썸네일에 해당하는 부분이 회색으로 가려져있다. -> 스켈레톤 ui~~ 무한스크롤이 적용된 사이트에서 스크롤할 때 로딩창이 생기면서 이미지를 불러온다. 모든 리소스를 받지않고 또는 load하지 않고 필요에 따라 그때그때 받아오는 것 이 때 사용되는 것이 이 개념이다. 레이지로딩은 스크롤 이벤트를 통해 구현한다. 이 때 스크롤 이벤트는 모든 이미지가 로드되면 제거..
프로그래밍/JavaScript
2021. 1. 11. 13:30
반응형
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
농담곰의 고군분투 개발기