본문 바로가기
IT_Developers/Javascript

jQuery - lazyload() 이미지 동적으로 / 스크롤시 호출

by 고코더 2018. 2. 12.


이미지가 화면에 올때 로딩 되게 하기


안녕하세요. 고코더 입니다.




오늘은 동적으로 이미지를 호출하여
페이지 로딩은 빠르게 하고 고객이 원하는 곳에 갔을 때만
해당 이미지를 볼 수 있도록 만들어 보려고 합니다. 
모바일을 많이 사용하는 환경에서 이젠 동적 호출은 기본이 되어가고 있습니다.

오늘 써볼 플러그인은 lazyload() 입니다.

▼홈페이지는 아래와 같습니다.

공식적인 API 의 내용은 읽어보셔서 참고 하시길 바랍니다.

저는 좀 더 익스프레스 하게 알려드리기 위해 샘플을 코딩 해보았습니다.

▼ 아래 내용을 참고해주세요
1
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에 입력 되게 해보았습니다.

▼ 이처럼 필요시기에 이미지를 불러 옵니다.
(로딩에 맞춰 캡쳐하기 힘드네요)



이 밖에 이펙터 같은 옵션이 더 있으나 실무에서 거의 사용하지 않는 부분이라
필요한 부분만 코딩 하였습니다. 그리고 아직 플러그인이 완성됐다는 느낌은 안들어서
기본 기능만 사용하시는걸 추천드립니다.



마무리

좋은 플러그인이 많네요. 자신만의 레퍼런스를 만들어서 빠르게 사용하세요



댓글