1

ここに私のマークアップがあります

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

1 に答える 1

0

画像にクラスを追加してセレクタとして使用してみませんか

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
    })
}
于 2013-11-15T03:11:08.257 に答える