jquery - 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。原始脚本来自：Preloading images with 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 转换为 href 数组：

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

preload(imageList);

或者跳过 preload 函数，而是做一个简单的循环：

$('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'));
})