자바스크립트로 이미지 캐싱을 하자! (롤오버 탭전환 등)

# 자바스크립트 이미지캐싱의 개념

자바스크립트를 사용하여 현재 페이지 영역에 이미지객체를 만들어 놓으면, 같은 URL로 이미지를 호출하는 상황에서 물리적인 이미지를 호출하지 않고 현재 페이지 영역에 만들어져 있는 이미지 객체를 호출한다. (Fiddler로 확인 가능)

# 자바스크립트 이미지캐싱의 용도

개발을 해 보니, 마우스 롤오버로 탭 전환 같은 것을 할 때 반드시 필요하다는 생각이 들었다. (>, < ) 짱 좋음! 개발서버에서는 번개같이 전환되던 탭이, 스테이징서버에서 꿈뻑꿈뻑 거리는 현상을 접하고 사용하게 되었음.

# 용법 예시 (jQuery)  - 출처 : stackoverflow.com

function preload(arrayOfImages) {

    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:
preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

# 용법 예시 (생 javascript)

//GNB TAB 롤오버 이미지 캐싱을 위한 뻥션
function MM_preloadImages(){

   var d=document;

   if(d.images)
   {
      if(!d.MM_p)
         d.MM_p=new Array();

      var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
      for(i=0; i<a.length; i++)
      {
         if (a[i].indexOf("#")!=0)
         {
            d.MM_p[j]=new Image();
            d.MM_p[j++].src=a[i];
         }
      }
   }
}

MM_preloadImages('/images/common/gnb_tab_03_01.png',
                '/images/common/gnb_tab_03_02.png',
                '/images/common/gnb_tab_03_03.png');

# 주의사항

URI가 아니라 URL(전체경로) 가 같아야 한다고 누가 그랬음.

- 출처 : 구글형님 & 제이슨 -