jQuery 로 이미지 preLoading

드림위버로 작업을 하면,
이미지가 들어 있는 화면을 html 로 만들때 MM_preloadImages 함수가 자동 생성되는데요..
간단한 jQuery 플러그인을 만들면 아래와 같이 만들 수 있답니다.

이미지 프리로드를 왜 하냐구요..? 화면에 그려지는 이미지들은, html 코드가 모두 읽혀지고..
해당 이미지들이 PC 에 다운로드 된 다음에야 웹브라우저가 화면에 렌더링을 하여 보여줍니다.
따라서 이미지가 많이 사용된 화면의 경우, 다운로드 받은 순서대로 이미지들이 열리는데..
간혹 이미지의 가로와 세로 사이즈에 따라 화면 레이아웃이 왔다갔다 하거든요.
이걸 막기 위해서 브라우저가 렌더링 하기 전에 이미지를 몽땅 받아 두는 거에요.
그러면, 첫 화면이 열리기 까지는 시간이 걸리겠지만..
그 다음 부터는 화면이 짠 한 방에 열리는 거죠. 이미지는 최소화 하면 좋긴 하지만, 심미성을 보태려면 필요하거든요.


원문. http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

(function($) { // 이 부분은 다른 javascript 프레임웍과 충돌하는 것을 방지하기 위해 사용, jQuery 만 사용한다면 불필요
  var cache = []; // 여기서 전역으로 선언
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) { // i++ 보다 i-- 가 더 빠른 거 아시죠? 수십개 정도 까지야 비슷하지만, 습관이 중요
      var cacheImage = document.createElement('img'); // 이건 pure javascript DOM 구조
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

사용 방법은..
jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

또는 $.preLoadImages(a, b, c, ...) 이렇게 필요한 만큼 사용하면 되겠군요.