image lazy loading

해야하는 이유

• lazy-loading은 사용자가(USER) 화면속 필요한 이미지만 로딩을 하고 나머지
  지금 화면에 필요없는 이미지들은 나중에 로딩을 하는 것을 말한다. 이렇게 함으로써 페이지의 모든 요소가 로드될때까지 기다릴 필요가 없으므로 웹페이지 사용을 더 빨리 할 수있다. 뷰포트내 볼 수 있는 부분의 이미지만 로딩을하고 사용자가 페이지를 스크롤을 해서 필요한 이미지를 그 시점에 로딩을 한다.

  브라우저는 서버로부터 리소스들을 (HTML, JS, CSS, image......)를 다운을 받는다.
  

  이미지 / iframes 보통 마지막으로 다운로드가 된다 
   즉, 모든 이미지가 다운로드가 완료 될 때까지 페이지는 흰 화면을 띄우게 돼 사용자 경혐이 좋지 않다.

• lazy loading을 사용하면 페이지가 placeholder 콘텐츠로 작성되며, 사용자가 필요할 때만 실제 콘텐츠로 대체 됨. 이미지, 비디오를 그냥 로딩하지 않고 lazy loading을 사용하는 이유는 사용자가 볼 수 없는 것들을 로딩할 가능성이 있기 때문이다. 특히 모바일에서는 lazy-loading 기법을 사용한다면 데이터도 적게 소모 될것이다.

• 간단하게 요약하자면 브라우저로 내가 볼 이미지만 로드(다운로드)을 하고 안 볼 이미지들은 로드 하지 않은 기법을 통하여 최적화 및 데이터 손실을 방지한다고 생각을 하면 됨.

다음 챕터에서 구현예정입니다.