JQuery предварительно загрузить изображения из списка

Question

Я хочу предварительно загрузить изображения ролловера в jQuery, но список изображений находится внутри списка примерно так:

<li><a href="/images/1.jpg"></a></li>
<li><a href="/images/2.jpg"></a></li>
<li><a href="/images/3.jpg"></a></li>

==========

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

var imagelist = $('li a').attr("href");
preload(imagelist);

Я изменил последнюю строку, чтобы она просто взяла href из моего списка. Исходный скрипт был из: Предварительная загрузка изображений с помощью jQuery

Это правильно?

Answer 1

Вы можете сделать это:

var imagelist = $('li a').each(function() {
    preload($(this).attr("href"));
});

Или Вы можете сделать это:

$.fn.preload = function() {
    this.each(function(){
        //alert("preloading " + $(this).attr("href"));
        $('<img/>')[0].src = $(this).attr("href");
    });
}
$('li a').preload();

jsFiddle

Answer 2

Вы можете использовать $.map для преобразования nodeList в массив hrefs:

var imageList = $('li a').map(function() {
    return this.href;
});

preload(imageList);

Или пропустить функцию предварительной загрузки и вместо этого выполнить простой цикл:

$('li a').each(function() {
    (new Image).src = this.href;
});

ЕслиВы хотите использовать его в качестве плагина попробуйте:

$.fn.preload = function() {
    return this.each(function() {
        (new Image).src = this.href;
    });
};

$('li a').preload();

Answer 3

Вы можете заполнить свой список изображений следующим образом, чтобы сделать его массивом:

var imagelist = [];
$('li a').each(function(){
  imagelist.push($(this).attr('href'));
})