jQuery를 사용하여 이미지 사전 로드하는 방법

질문 : jQuery로 이미지 미리로드

---

JavaScript로 이미지를 미리로드하는 빠르고 쉬운 방법을 찾고 있습니다. 중요한 경우 jQuery를 사용하고 있습니다.

나는 여기에서 이것을 보았다 ( http : //nettuts.com ... ) :

function complexLoad(config, fileNames) {
  for (var x = 0; x < fileNames.length; x++) {
    $("<img>").attr({
      id: fileNames[x],
      src: config.imgDir + fileNames[x] + config.imgFormat,
      title: "The " + fileNames[x] + " nebula"
    }).appendTo("#" + config.imgContainer).css({ display: "none" });
  }
};

그러나 내가 원하는 것에 대해 약간 과도하게 보입니다!

이 작업을 수행하는 jQuery 플러그인이 있지만 모두 크기가 약간 커 보입니다. 이미지를 빠르고 쉽고 빠르게 미리로드하는 방법이 필요합니다!

답변

---

빠르고 쉬운 :

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'
]);

또는 jQuery 플러그인이 필요한 경우 :

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

출처 : https://stackoverflow.com/questions/476679/preloading-images-with-jquery