Post

[JavaScript] images Loaded

Posted
By songmiok
2 min read
[JavaScript] images Loaded

imagesLoaded

imagesLoaded Plugin을 사용하면 이미지의 로딩 여부를 체크하여 이벤트를 발생시킬 수 있습니다.

CDN

1

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

NPM

1
2

$ npm install imagesloaded
$ yarn add imagesloaded

Syntax

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const init = () => {
  // image loading이 끝나면 실행 할 함수
};

const imgs = [...document.querySelectorAll("img")]; // Array like ==> Array
const loader = document.querySelector(".loader--text");

const updateProgress = (instance) => {
  const per = Math.round((instance.progressedCount * 100) / imgs.length);
  loader.textContent = `${per}%`;
};

imagesLoaded(imgs)
  .on("progress", updateProgress)
  .on("always", init);

background

{ background: true }, 또는 { background: '.bg' } 옵션을 추가하여 하위 요소의 배경 이미지가 로드되었을 때를 탐지합니다.

1
2
3
4
5
6
7

imagesLoaded( '#container', { background: true }, function() {
  console.log('#container background image loaded');
});

imagesLoaded( '#container', { background: '.item' }, function() {
  console.log('all .item background images loaded');
});

Event

Event 
always모든 이미지가 확인되면 실행
done손상된 이미지 없이 모두 성공적으로 로드되면 실행
fail손상된 이미지가 있을 때 실행
progress각 이미지가 로드될 때마다 실행

always

1
2
3

imagesLoaded.on( 'always', function( instance ) {
  console.log('ALWAYS - all images have been loaded');
});

done

1
2
3

imagesLoaded.on( 'done', function( instance ) {
  console.log('DONE  - all images have been successfully loaded');
});

fail

1
2
3

imagesLoaded.on( 'fail', function( instance ) {
  console.log('FAIL - all images loaded, at least one is broken');
});

progress

1
2
3
4

imagesLoaded.on( 'progress', function( instance, image ) {
  var result = image.isLoaded ? 'loaded' : 'broken';
  console.log( 'image is ' + result + ' for ' + image.img.src );
});


참고
JavaScript
This post is licensed under CC BY 4.0 by the author.