조금만 더 빨리 이런 좋은 기법을 알았다면 자 바스크립트 Quick Guide 촬영시에 포함시켰을 겁니다.

데모 페이지에서 스크롤을 하면 이미지가 동적으로 로딩되는 모습을 볼 수 있습니다.

사 용자가 현재 화면에서 보고 있는 영역의 이미지는 모두 로딩되지만, 현재 화면에서 볼 수 없는 영역의 이미지는 미리 다운로드 되지 않습니다.

사용자가 페이지의 일부만 보고 다른 사이트로 이동하는 것을 생각하면 대역폭을 절약할 수 있습니다.

Lazy Load Plugin for jQuery에 따르면 jQuery lazy load 플러그인을 사용합니다. 이 플러그인은 추가로 dimension 플러그인을 사용합니다. 각각 자바스크립트 라이브러리이므로 다운로드 받습니다.

HTML 페이지에 다음을 추가합니다.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

Prototype 과 마찬가지로 $() 함수를 사용하고 있죠.

$('img').lazyload();

를 추가하면 모든 이미지는 지연 로딩(Lazy Loading)을 하게 됩니다.

$("img").lazyload({ threshold : 200 });

이렇게 선택적인 옵션을 주면 이미지가 표시되기 200 픽셀 이전에 오면 이미지를 로딩합니다.

$("img").lazyload({ placeholder : "img/grey.gif" });

엑스박스 뜨지 말라고 1 픽셀 이미지로 임시 표시를 할 수 있습니다.

$("img").lazyload({
    placeholder : "img/grey.gif",
    event : "click"
});

이렇게 쓸 수도 있습니다. 이건 1 픽셀 이미지로 임시 표시를 하고, 사용자가 클릭을 해야만 이미지를 불러오게 됩니다.

잠깐 드는 생각이 매우 야한 사진을 16개의 조각으로 자르고, 위 코드를 적용합니다. 사용자가 클릭할 때 마다 부분부분 이미지를 보게하는 겁니다. 저라면 매우 사악해서 매우 야한 사진을 1픽셀 단위로 자르고, 사용자가 모든 픽셀을 죽어라 클릭하게 만들겠습니다. 1024 x 768 사이즈라면 786,432 바이트죠. 대략 78만번을 클릭하게 만들지도... ^^;

아니면 16가지 음식 이미지를 만들고, 음식 이미지 배치는 랜덤하게 표시하게 합니다.
그리고, 클릭해서 나오는 메뉴를 점심 메뉴로 만들 수 있겠죠??

그림판을 이용해서 한글로 섞을 재료를 써서 이미지로 만들고, 10개 중에 4개를 골라서
믹스해서 "벌칙주 만들기" 프로그램도 만들어 볼 수 있겠죠??

+ Recent posts