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

您可以像这样填充图像列表，使其成为一个数组：

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

Answer 3

您可以使用$.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();

jQuery从列表中预加载图像

3 个答案: