이미지가 화면에 올때 로딩 되게 하기
안녕하세요. 고코더 입니다.
오늘은 동적으로 이미지를 호출하여
페이지 로딩은 빠르게 하고 고객이 원하는 곳에 갔을 때만
해당 이미지를 볼 수 있도록 만들어 보려고 합니다.
모바일을 많이 사용하는 환경에서 이젠 동적 호출은 기본이 되어가고 있습니다.
오늘 써볼 플러그인은 lazyload() 입니다.
▼홈페이지는 아래와 같습니다.
공식적인 API 의 내용은 읽어보셔서 참고 하시길 바랍니다.
저는 좀 더 익스프레스 하게 알려드리기 위해 샘플을 코딩 해보았습니다.
▼ 아래 내용을 참고해주세요
gocoder_lazyboard.zip1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script> // 플로그인 참조 <script type="text/javascript">
$(function(){
$('img.gocoder').lazyload({ // 이미지를 동적으로 호출 하도록 placeholder : 'loading.gif', // 로딩 이미지
threshold: 0, // 접근 ~px 이전에 로딩을 시도한다.
load : function(){ // 로딩시에 이벤트
$(this).attr('alt',$(this).attr("data-original"));
}
});
});
</script>
</head>
<body>
<Table>
<tr>
<td><img data-original="img (1).jpg" class="gocoder" width="300"></td>
<td><img data-original="img (2).jpg" class="gocoder" width="300"></td>
</tr>
<tr>
<td><img data-original="img (3).jpg" class="gocoder" width="300"></td>
<td><img data-original="img (4).jpg" class="gocoder" width="300"></td>
</tr>
</Table>
</body>
</html>
|
cs |
예제만 보시면 대부분 이해가 될거라 생각이 듭니다.
그래도 조금 더 자세히 설명을 드리면
1. lazyload() -> 7번째 줄
$('img.gocoder').lazyload()
- 해당 기능을 호출합니다. 이렇게만 쓰셔도 옵션 없이 정상 작동합니다.
2. placeholder -> 8번째 줄
placeholder : 'loading.gif'
- 호출 전 이미지를 지정합니다. 보통 로딩 gif가 올거 같네요. img 태그의 src의 주소를 매칭하여 사용할 수 있습니다.
3. threshold -> 9번째 줄
threshold: 0,
- 호출 할 시점을 입력합니다. 숫자가 높을 수록 먼저 로딩을 하고 있습니다.
4. load -> 10~12번째 줄
load : function()
- 호출 시점에 이벤트를 실행 할 수 있습니다. 파일명을 이미지 속성 alt에 입력 되게 해보았습니다.
▼ 이처럼 필요시기에 이미지를 불러 옵니다.
(로딩에 맞춰 캡쳐하기 힘드네요)
이 밖에 이펙터 같은 옵션이 더 있으나 실무에서 거의 사용하지 않는 부분이라
필요한 부분만 코딩 하였습니다. 그리고 아직 플러그인이 완성됐다는 느낌은 안들어서
기본 기능만 사용하시는걸 추천드립니다.
마무리
좋은 플러그인이 많네요. 자신만의 레퍼런스를 만들어서 빠르게 사용하세요
'IT_Developers > Javascript' 카테고리의 다른 글
| console.log - 개발자도구 콘솔 창에 안보이게 하기 (0) | 2018.10.01 |
|---|---|
| javascript - iframe 안에 함수 function 접근 제어 하기 (0) | 2018.07.10 |
| javascript - splice() / 배열 다루기 (0) | 2018.02.05 |
| jQuery - 예약어 변경 하기 / $.noConflict() (0) | 2018.01.06 |
| JavaScript - input 박스에 숫자만 입력 가능하도록 (3) | 2018.01.01 |
댓글