Функция для подгрузки картинок с использованием jQuery?

Вопрос

Я ищу простой и надёжный способ подгрузить картинки на JavaScript. Если это имеет значение, я использую jQuery. Я нашёл в интернете такую функцию:

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" });
  }
};

Но похоже, что она делает больше, чем мне нужно. Я знаю, что для подгрузки изображений есть специальные плагины, но они довольно много весят как для такой простой функциональности. Поэтому я ищу простой, понятный и короткий способ предварительной загрузки картинок.

Спасибо!


Ответ №1

Быстро и просто:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Как вариант, Вы можете использовать также:
        // (new Image()).src = this;
    });
}
// Использование:
preload([
    'img/img1.jpg',
    'img/img2.jpg',
    'img/img3.jpg'
]);

Или же, если Вы хотите оформить это в виде маленького плагина:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
// Использование:
$(['img1.jpg','img2.jpg','img3.jpg']).preload();

Нет комментариев

Добавить комментарий


(обязательно)