1. ホーム
  2. javascript

[解決済み] jQueryで画像をプリロードする

2022-03-14 18:07:48

質問

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();