출처 - http://www.cmsfactory.net/node/11093
imagesLoaded는 문서 안에 또는 특정 요소 안에 있는 이미지가 모두 로딩되었는지 감지하는 자바스크립트 라이브러리입니다.
이미지가 로딩되기 전에, 로딩 중에 있을 대, 로딩된 후에 어떤 작업을 하고 싶을 때 유용합니다.
jQuery도 지원하고 있어서 쉽게 요소를 선택하고 코딩할 수 있습니다.
- Homepage : http://imagesloaded.desandro.com/
- GitHub : https://github.com/desandro/imagesloaded
적용 방법
다음의 링크에서 파일을 다운로드 받습니다.
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
개발자가 제공하는, 실전에서 사용할 수 있는 예제의 링크입니다.
'[ Web ] > JavaScript & JQUERY' 카테고리의 다른 글
| jquery get 변수 받는법 (0) | 2017.01.18 |
|---|---|
| 자바스크립 팝업창 묻지않고 닫기 (0) | 2015.01.29 |
| 팝업창 - 하루동안 팝업창 띄우지 않기 (0) | 2012.09.12 |
| 팝업창 띄우기!! (0) | 2012.09.12 |
| 웹브라우져_창 흔들기 (0) | 2012.09.12 |
댓글