Filament Group의 Scott Jehl씨가 이미지 미리읽기를 위한 jQuery 플러그인을 소개해주셨습니다. 해당 스크립트는 현재 페이지의 각 스타일 시트 내의 모든 규칙에 대해 반복하며 이미지 URL이 있으면 읽도록 해서 미리 캐싱하도록 합니다.
[code:js]
jQuery.preloadCssImages = function(){
      var allImgs = [];//new array for all the image urls
      var k = 0; //iterator for adding images
      var sheets = document.styleSheets;//array of stylesheets
     
      for(var i = 0; i<sheets .length; i++){//loop through each stylesheet
              var cssPile = '';//create large string of all css rules in sheet
              var csshref = (sheets[i].href) ? sheets[i].href : 'window.location.href';
              var baseURLarr = csshref.split('/');//split href at / to make array
              baseURLarr.pop();//remove file path from baseURL array
              var baseURL = baseURLarr.join('/');//create base url for the images in this sheet (css file's dir)
              if(baseURL!="") baseURL+='/'; //tack on a / if needed
              if(document.styleSheets[i].cssRules){//w3
                      var thisSheetRules = document.styleSheets[i].cssRules; //w3
                      for(var j = 0; j<thisSheetRules.length; j++){
                              cssPile+= thisSheetRules[j].cssText;
                      }
              }
              else {
                      cssPile+= document.styleSheets[i].cssText;
              }
             
              //parse cssPile for image urls and load them into the DOM
              var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);//reg ex to get a string of between a "(" and a ".filename"
              if(imgUrls != null && imgUrls.length>0 && imgUrls != ''){//loop array
                      var arr = jQuery.makeArray(imgUrls);//create array from regex obj      
                      jQuery(arr).each(function(){
                              allImgs[k] = new Image(); //new img obj
                              allImgs[k].src = (this[0] == '/' || this.match('http://')) ? this : baseURL + this;     //set src either absolute or rel to css dir
                              k++;
                      });
              }
      }//loop
      return allImgs;
}
편하네요.

from Preloading Images with jQuery
TAG
Posted by 행복한고니 트랙백 1 : 댓글 0

댓글을 달아 주세요