jquery - jQueryはリストから画像をプリロードします

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を取得します。元のスクリプトは次のとおりです：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

$.mapnodeListをhrefの配列に変換するために使用できます。

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();