Функция для подгрузки картинок с использованием 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();

No responses yet

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