jquery - 根据索引访问预加载的数组

Question

这是我的标记

<div id="pics">
    <img src="http://someimageimage.jpg" />
    <img src="http://someimageimage2.jpg" />
    <img src="http://someimageimage3.jpg" />
</div>

目前我有这个代码：

function loop(i) {
    var $img = $("#pics img");
    $img.eq(idx).fadeIn(2000, function () {
    // code comes here
    }
}

loop(0);

这工作正常。现在，我必须将其更改为使用图片预加载，而不是使用那些图像标签。所以我把链接放在一个数组中

// array of images
var picarr = ['http://someimageimage.jpg',
              'http://someimageimage2.jpg',
              'http://someimageimage3.jpg',
              'http://someimageimage4.jpg'];

prepicload(picarr); // pre load the pics          

function prepicload(picarr) {
    $(picarr).each(function () {
        $('<img/>').attr('src', this).appendTo('body').hide();
    });
}

我现在将如何更改我的代码以访问此预加载的图片而不是图像选择器？

function loop(i) {
    var $img = $("#pics img");
    $img.eq(idx).fadeIn(2000, function () {
    // code comes here
    }
}

Answer 1

为什么不向图像添加一个类并将其用作选择器

function prepicload(picarr) {
    $(picarr).each(function () {
        $('<img/>', {
            src: this,
            'class': 'pics'
        }).hide().appendTo('body');
    });
}

然后

function loop(i) {
    var $img = $("img.pics");
    $img.eq(idx).fadeIn(2000, function () {
    // code comes here
    })
}

另一种解决方案是使用共享变量，例如

//use a shared variable to store all the preloaded images
var $preimgs = $();

function prepicload(picarr) {
    $(picarr).each(function () {
        var $img = $('<img/>', {
            src: this,
                'class': 'pics'
        }).hide().appendTo('body');
    });
    $preimgs = $preimgs.add($img);
}

function loop(i) {
    $preimgs.eq(idx).fadeIn(2000, function () {
        // code comes here
    })
}