Vue) 사용자 지정 디렉티브 사용하여 image lazy loading 구현하기

 

사용자 정의 지시자 생성 (설명 : https://kr.vuejs.org/v2/guide/custom-directive.html)

// v-lazyload
Vue.directive('lazyload', {
  mounted(el) {

  },
  
});

IntersectionObserver API 구현 (설명:https://velog.io/@katanazero86/Intersection-Observer-API)

mounted(el) {

    function imageLoad(targetElement) {
      const imgElement = targetElement;
      // data-lazy 에 지정된 이미지 경로를 <img src=""> 에 셋팅 합니다.
      imgElement.setAttribute('src', imgElement.getAttribute('data-lazy'));
      imgElement.onload = function() {
        imgElement.removeAttribute('data-lazy');
      };

    }

    function callIntersectionApi() {

      const options = { 
        root: null, 
        threshold : 0.5, 
        rootMargin: '0px' 
      };
      
      const lazyLoadCallback = (entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) { 
          // 감지대상이 교차영역에 진입 할 경우
            imageLoad(entry.target);
            observer.unobserve(entry.target);
          }
        });
      };

      const lazyLoadingIO = new IntersectionObserver(lazyLoadCallback, options);
      lazyLoadingIO.observe(el);

    }

    // 지원되는 브라우저가 있기때문에, 이런식으로 처리
    window.IntersectionObserver ? callIntersectionApi() : imageLoad(el);

  },

• window.IntersectionObserver ? callIntersectionApi() : imageLoad(el); 검사를 통해, API 지원여부를 확인합니다. 지원하지 않는다면 바로 이미지를 불러옵니다.
• API 지원시, IntersectionObserver callback 함수 작성 및 option 객체 작성 후 인스턴스를 생성해줍니다. 인스턴스 생성 후 observe() 를 호출하여 관찰대상 엘리먼트를 지정합니다.
• 교차영역에 관찰이 되어 callback 이 실행이 되면, isIntersecting 속성을 통해 검사 후 imageLoad() 를 호출합니다. 그리고 해당 엘리먼트에 대한 감시를 해제해줍니다.

<img :data-lazy="info.imgUrl" v-lazyload>

• 초기에 이미지를 셋팅할때, 위와같이 구성합니다. 이미지가 실제 안보이는 영역에는 랜더링이 되어있지 않기 때문에 성능이 좋습니다.
• data-lazy 속성을 읽어서, src에 지정해주고 onload가 완료되면 해당 속성을 삭제해줍니다.

https://velog.io/@katanazero86/vue-%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%A0%95%EC%9D%98-%EC%A7%80%EC%8B%9C%EC%9E%90%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-image-lazy-loading-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

vue 사용자 정의 지시자를 활용한 image lazy loading 구현하기

 

도움 되셨다면 하단의 광고 클릭 한번 부탁드립니다:)