Image Lazy Loading

Lazy Loading 이란?

일반적으로  웹페이지는 사용자가 페이지를 열면 전체 페이지의 내용이 한번에 다운로드 되어 레더링이 이루어진다.

 

페이지의 내용이 매우 길고 사용자가 페이지 상단의 내용에만 관심이 있다면,

페이지 하단의 내용의 로딩까지 소비한 시간과 통신비용은 낭비가 된다.

 

사용자가 실제 이미지들이 실제로 화면에 보여질 필요가 있을때 비로소 해당 이미지의 로딩을 시작하는 것을 lazy lading이라고 한다.

lazy loading을 실현함으로써 페이지의 로딩시간과 통신비용을 줄일 수 있게된다.

 

Intersection Observer

사용자가 페이지를 보는지 혹은 보고있지않은지 observe 한다. 

 

다음은 사용자의 스크롤 움직임에 따라 사용자가 보고있는 section에 노란색 바탕을 채우도록 만든 코드이다. (threshold: 0.1) 보고있지 않으면 노란색 바탕은 해제된다.

See the Pen by korkt-kim (@korkt-kim) on CodePen.

callback function

• 사용자가 특정 section을 보고있는지(intersecting)의 여부가 바뀔때마다 observe callback funtion이 실행된다
  • 현재 intersecting 여부는 entry.isIntersecting의 true/false값으로 판별한다.
• observer : 특정 node를 observe하는 observer 자기 자신의 instance. 

options

• options없이 기본적인 intersection observer는 viewport안에 node의 변화가 있을때마다 callback 함수를 실행시키기 때문에 무거운 감이 있다. 이를 해결하기위해 options를 사용한다.
• root: intersecting 영역을 지정한다. observer를 동작시키기 위해서는 당연히 타겟의 조상 node element여야한다.
  default는 { root: null; } 이다. 이는 브라우저의 viewport를 intersecting 영역으로 삼겠다는 것이다.
• threshold: section이 root element 기준 얼마 비중으로 들어와야 callback 함수를 실행할지 설정한다. 0~1의 값을 가진다.
• rootMargin : root element안에서 intersecting 영역의 범위(px)를 설정한다. default는 0이다. "-150px" 이라면 현재 intersecting중인 페이지에서 동서남북 각각 안쪽으로 150px씩 움직인 범위안에서 intersecting여부를 찾게 된다.

lazy loading

그럼 이제 사용자가 특정 이미지를 intercept중일때만 해당 image를 로드하도록 lazy loading을 구현해보자

 

See the Pen by korkt-kim (@korkt-kim) on CodePen.

 기본적인 원리는 다음과같다.

1. 초기에 이미지가 바로 load 못하도록 img 안 src attribute를 설정하지않는다. 여기서는 data-src로 이미지 url을 설정했다.
2. 각 이미지 별로 intersection을 설정한다.
3. 특정 이미지의 isIntersecting이 감지되면 해당 이미지의 data-src의 value를 src의 value로 설정해준다. 이제 해당 이미지는 load를 시작할 것이다.
4. isIntersecting의 이미지는 이제 로드가 완료되어 더이상 observe할 필요없으므로 unobserve해준다