JavaScript 강좌 | Library > imagesLoaded - 이미지가 로드되었음을 감지하는 라이브러리

imagesLoaded는 문서 안에 또는 특정 요소 안에 있는 이미지가 모두 로딩되었는지 감지하는 자바스크립트 라이브러리입니다.

이미지가 로딩되기 전에, 로딩 중에 있을 대, 로딩된 후에 어떤 작업을 하고 싶을 때 유용합니다.

jQuery도 지원하고 있어서 쉽게 요소를 선택하고 코딩할 수 있습니다.

적용 방법

다음의 링크에서 파일을 다운로드 받습니다.

https://github.com/desandro/imagesloaded/releases

예제를 포함하여 여러 파일이 있는데, 서버에 업로드해야할 것은 imagesloaded.pkgd.min.js 하나입니다.

그리고 HTML 문서에 다음의 코드를 추가합니다. (경로는 적절히 수정하셔야 합니다.)

<script src="imagesloaded.pkgd.min.js"></script>

예제 1

http://book.cmsfactory.net/JavaScript/V01/library/imagesLoaded/imagesLoaded-01.html

이미지가 모두 로드되면 All images are loaded.를 출력하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Library | imagesLoaded</title>
    <style>
      p {
        text-align: center;
      }
      img {
        width: 280px;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.1.js"></script>
    <script src="imagesloaded.pkgd.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( '#jbImg' ).imagesLoaded( function() {
          $( '#jbImg' ).after( '<p>All images are loaded.</p>' );
        } );
      } );
    </script>
  </head>
  <body>
    <p id="jbImg">
      <img src="image-1.jpg">
      <img src="image-2.jpg">
    </p>
  </body>
</html>

예제 2

http://book.cmsfactory.net/JavaScript/V01/library/imagesLoaded/imagesLoaded-02.html

이미지를 보이지 않게 한 후, 이미지가 모두 로딩되면 천천히 화면에 나오게 하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Library | imagesLoaded</title>
    <style>
      p {
        text-align: center;
      }
      img {
        width: 280px;
        display: none;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.1.js"></script>
    <script src="imagesloaded.pkgd.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( '#jbImg' ).imagesLoaded( function() {
          $( '#jbImg img' ).fadeIn( 2000 );
        } );
      } );
    </script>
  </head>
  <body>
    <p id="jbImg">
      <img src="image-1.jpg">
      <img src="image-2.jpg">
    </p>
  </body>
</html>

예제 3

개발자가 제공하는, 실전에서 사용할 수 있는 예제의 링크입니다.

Created on 2014-11-19 17:35 | Updated on 2017-07-05 21:21

이 글을 공유하기

Kakao

Book navigation