jQueryの画像のロード、私は画像をプリロードするには、次のコードを使用しています複数のdivの

Question

に追加：それが必要のよう

$('<img src="'+ Image +'">').load(function() { 
    $(this).appendTo('#background'); 
    $('#background').show(); 
}); 

これが働いています。しかし、複数のdivにイメージを追加しようとすると、最後のdivにのみイメージが追加されます。

アイデア？私はこれを試してみましたが、結果なしている

：ご提供JSコードに参照として

$(this).appendTo('#background, #second-div'); 

Answer 1

。 背景をidと宣言したと仮定します。 クラスと宣言し、以下のスニペットを置き換えてみてください。うまくいけば、私はそれが動作すると思います。

$('<img src="'+ Image +'">').load(function() { 
    $(this).appendTo('.background'); 
    $('.background').show(); 
}); 

Answer 2

あなたは複数の要素にマッチし.appendTo、jQuery will clone your reference elementにセレクタを渡した場合 - すべてのイベントリスナーでを - とクローン化された要素を追加します。

参照要素は、onloadリスナーを持つイメージであるため、追加された要素もonloadリスナーを持つイメージになり、無限の数のイメージが作成されます。

「動作していません」と表示され、ブラウザで画像が氾濫しない理由は、隠しコンテナに追加していて、.showコールには届かないためです。解決策は、前.clone()自分自身を呼び出すと、コメントで示唆

Fiddle with infinite images

Fiddle with one image

：

一つの解決策は、loadコールバックが正確に一度解雇されていることを検証jQueryのoneハンドラを、使用することです新しい単一のターゲットに画像を追加することは、.clone()としていて、.clone(true)は何もないので、正確に動作しています.appendToは内部的に行い、クローンされたオブジェクトに対してもリスナーが保持される原因となっています。

Fiddle with clone