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

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

1 个答案: