jQuery로 ajax 호출시 로딩중 이미지 보여주기 > jquery

본문 바로가기

검색취소

jQuery로 ajax 호출시 로딩중 이미지 보여주기

검색 이전 다음 목록

본문

요즘 유명 메이져사이트를 방문해보면 페이지 로딩 속도가 상당히 빨라졌다는 느낌이 들때가 있습니다.

 

방문자가 늘어난다고 서버시스템의 사양을 계속해서 높이거나 서버를 분산하기보다는
최대한 효율적인 방법으로 서버의 부하를 줄이는 노력을 강구해야 하는데 그중 이미지 파일들을 페이지 호출시 무작정 보여주는 것이 아니라 브라우져의 가시영역을 이동(스크롤)할 경우에만 해당 영역의 이미지를 보여주는 기능이 있어 소개합니다.
이렇게 함으로써 불필요한 서버의 로드를 줄일 수 있게 되어 서버의 성능에 좋은 영향을 미치게 됩니다.

 

방법론적인 차이는 있겠지만, 옥션이나 이미지를 주로 다루는 사이트들에서 많이 사용하는 방법이지요~!
 

 

 



이미지를 보시는 바와 같이 스크롤을 내리면 화면이 가시영역으로 들어오게되고,

이때 이미지를 서버에서 호출하게됩니다. 방문자가 많은 사이트나 이미지를 많이 사용하는 사이트에서

유용하게 사용할 수 있는 기능이 되겠네요.

 

사용법을 간단하게 안내해 드립니다.

 

 

 

1. 헤더부분에 아래코드를 넣음  
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

2. 이미지 태그를 지정함 (기본코드)
$("img").lazyload();

3. 실제 적용예제(img/grey.gif 파일을 이미지 로드전에 보여줌)
<script type="text/javascript" charset="utf-8">
    $(function() {
        $("img").lazyload({placeholder : "img/grey.gif"});
    });
</script>


4. 특정영역에만 코드적용
게시판이나 본문내용외에 다른 이미지의 로드가 오작동하는 경우가 종종 발생합니다.
이를테면 전체 페이지 레이아웃을 DIV(CSS)로 구성하고 본문내용외의 오른쪽메뉴영역에 썸네일과 같은 이미지들이 있을 경우 페이지를 가장하단으로 가시영역을 스크롤하지 않으면 오른쪽이미지가 가시영역에 들어와있음에도 불구하고 로드되지 않는 경우가 발생합니다. (본문내용 영역이 하단으로 많이 내려올 경우에 종종 발생)

이때는 전체 페이지를 LazyLoad 효과를 적용하지 말고 특정 div 영역에만 국한되게 적용할 수 있습니다.
jQuery 문법인 $() 사용법과 마찬가지로 아래와 같이 적용합니다. 적용법은 아래와 같습니다.

<script type="text/javascript" charset="utf-8">
      $(function() {
          $("#lazyload img").lazyload({placeholder : "img/grey.gif"});
      });
</script>

<div id="lazyload">
.....<img src="....">
</div>

해당 "lazyload"라는 id값을 가진 div영역 내에서만 작동하게됩니다.
 

 

 



재밋게 활용해보세요.~! 특정영역 지정이나, 기타 옵션은 참고사이트 데모페이지를 참조하시기 바랍니다.
참고사이트: http://www.appelsiini.net/projects/lazyload/

 

등록된 댓글이 없습니다.

검색취소

jquery

검색
  • 눈여겨 볼만한 jQuery 플러그인
  • 눈여겨 볼만한 jQuery 플러그인

    이미지 갤러리.. 1. FUll Size Images Viewer- 간단한 제품사진보기, 이미지 갤러니 Thumb Nail 이미지 보기에 사용하면 제격-  http://www.addfullsize.com/ 2. Aj…

  • no image
  • 모달에 z-index 변경

    배추빌더 게시판 팝업 z-index 수정mw.lib/mw.skin.basic.lib.php                $(function() {            $("#dialog-message-$vie…

  • jQuery로 ajax 호출시 로딩중 이미지 보여주기
  • jQuery로 ajax 호출시 로딩중 이미지 보여주기

    요즘 유명 메이져사이트를 방문해보면 페이지 로딩 속도가 상당히 빨라졌다는 느낌이 들때가 있습니다. 방문자가 늘어난다고 서버시스템의 사양을 계속해서 높이거나 서버를 분산하기보다는최대한 효율적인 방법으로 서버의 부하를 …

  • no image
  • jQuery 합성이벤트 toggle() hover()

    jQuery 합성이벤트 toggle() hover() 보통 이벤트는 하나의 사용자 행위에 의해 발생한다.그리고 하나의 행동에 대해 하나의 응답을 내놓는다. 합성이벤트는 하나이상의 사용자 행위에 별개의 응답을 말하는 …

  • JQuery Hover Effects
  • JQuery Hover Effects

    첨부파일

    마우스 오버시 이벤트(이펙트)가 발생된다. 듀얼, 슬라이딩, 회전, 줌 등등 ... 7가지 이펙트를 지원해준다.워낙 유명한 사이트임.

?>