Jquery 基于索引访问预加载的数组

这是我的标记

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

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

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

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

//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
    })
}

---

我们如何绝对确定我们正在访问预加载的图像？@Thomasmkov，这将取决于是否在站点中加载了另一个具有相同类的图像，然后会发生什么？其他不同类别的预加载图片呢？@Thomasmkov你所说的预加载图片是什么意思。。。它是否与prepicload方法加载的图像相同？如果是这样的话，那么他们所有人都将拥有相同的类。。。在这种情况下，这应该是合理的。顺便说一句，你已经给出了两种方法来做同样的事情。从最佳实践的角度来看，您的哪些方法是好的，为什么？

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
    })
}