[JS] Image Lazy Load - lazysizes

이미지 레이지 로드 하는 프러그인도 여러 가지고 자바스크립트 자체 적으로 Intersection Observer를 사용하면 구현도 가능하다.

그런데 Intersection Observer의 단점은 화면이 랜더링 되는 시점의 Image LazyLoading 만 가능하다는 것이다.
그렇다 보니 게시판과 같은 화면에서 더보기로 추가 되는 경우 구현이 어렵다는 단점이 있다.

그래서 주로 사람들이 많이 사용하는 플러그인이 LazySizes 이다.

복잡한 사용 방법은 https://github.com/aFarkas/lazysizes 를 참고하길 바란다.

간단한 사용방법은

1. 스크립트를 호출해 준다!

<script src="lazysizes.min.js" async=""></script>

2. 클래스에 lazyload를 추가해 주고 이미지 경로는 data-src에 추가 해 준다.

<img data-src="image.jpg" class="lazyload" />

끝!