이미지 로딩 상황을 체크하여 이벤트를 주는 imagesLoaded.js

 

#1 서론

HTML 문서의 로드 이벤트 상태(HTML 문서의 생명주기)을 이용한 명령어는 매우 다양하게 있습니다.

그중 대표적인것들이 다음과 같은것들이 있습니다.

 

  (1) 이미지 파일(<img>)이나 스타일시트 등 자원의 로드는 기다리지 않으며,

  브라우저가 HTML을 읽고 DOM 트리를 완성하는 즉시 발생하는 DOMContentLoaded.

 

document.addEventListener("DOMContentLoaded", function(){
  console.log(1)
});

 

  (2) 스타일, 이미지 등의 모든 리소스가 로드 되었을떄 실행되는 window 객채의 load 속성.

  window.onload = function(){
    console.log(1)
  }

 

이 글은 이러한 이벤트에 관한 내용을 설명하기위해 작성하는 글이 아니다보니, 예외 사항이나 관련 내용을 알아보고싶다면 아래 사이트를 참고해 보시는것을 추천드립니다.

 

※ 참고 : JAVASCRIPT.INFO - DOMContentLoaded, load, beforeunload, unload 이벤트

 

 

이 글에서 설명하고자 하는것은 위와 비슷한 효과를 가졌지만, 이미지를 메인으로 하며,

특정 요소 안에 있는 이미지의 로딩 상태를 체크하여 각 상태별로 이벤트를 지정할 수 있는 라이브러리입니다.

 

 

 

#2 다운받기

imagesLoaded.js는 아래 공식 웹페이지를 통해 Download 방식과 CDN 방식 중 원하는 방식을 선택하여 사용하면 됩니다.

<!-- imagesLoaded.js CDN -->
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>

 

공식 웹페이지 >

 

 

 

#3 사용 방법

  제이쿼리 방식과 바닐라 자바스크립트 방식 모두 지원하며 해당 사용 방식은 공식 웹페이지에서 확인 할 수 있으니 원하는 타입을 골라서 사용하시면 되는데, 로드 상태에 따른 메소드들은 크게 4가지 입니다.

$('#container').imagesLoaded()
  .always( function( instance ) {
    console.log('all images loaded');
  })
  .done( function( instance ) {
    console.log('all images successfully loaded');
  })
  .fail( function() {
    console.log('all images loaded, at least one is broken');
  })
  .progress( function( instance, image ) {
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
  });

always -  모든 이미지가 로드된 후에 발생하는 이벤트입니다. (이미지 로딩이 실패하여 제대로 출력이 되지 않은 이미지가 있더라도 로드가 끝났다면 이곳에 포함됩니다)

done - 모든 이미지가 성공적으로 로드된 후에 발생하는 이벤트입니다.

fail - 모든 이미지가 로드되었지만 하나 이상의 이미지가 제대로 로드되지 못했을때 발생합니다.

progress - 각 이미지가 로드가 되었을때 실행됩니다. 이미지 개수를 체크하여 진행도를 표시하는 바를 만든다거나 할때도 사용할 수 있습니다.

 

사용 예

  공식 샘플 vanilla JS 타입 >

  공식 샘플 jQuery 타입 >