1

jQuery と Ajax で img をロードするには

1- img を直接ロードしようとしましたが、機能しません:

$("#target").load("img.jpg");

2- 別の html 内にある img をロードできます。ここでは、img.html 内の img1 内にある img を div ターゲットにロードします。

$(function(){
   $("#linkajax").click(function(e){
      e.preventDefault();
      $("#target").load("img.html #img1");     
   });
})

2 は Ajax と jQuery で img をロードする最良の方法ですか、それともより直接的な方法がありますか?

(大量の画像をロードする必要があるため、Ajax を使用しています。最初にロードしてから、ユーザーがクリックしたときにすぐにフェードインしたいのです。ここでは、説明をわかりやすくするためにケースを単純化します)

4

3 に答える 3

1

なぜあなたはそれをしているのですか、ただ画像を追加してください。

$("#target").append("<img src='img.jpg' />");

他の方法

$('<img/>', {
    src: 'img.jpg'
}).appendTo("#target");
于 2013-03-07T14:52:20.423 に答える
1

画像ファイルを参照するために ajax が必要なのはなぜですか?

$('#target').append('<img src="img.jpg" alt="my image"/>');

ETA: ajax 経由でイメージ パスのリストを取得する場合は、次のようなものが適切です。

$('#linkajax').on('click ', function(){
  $.ajax({
     url: "getsrcs.php", //or some script to return a JSON array
     dataType: 'json',  
  }).done(function(data) { //where data is a JSON array like [img1.jpg, img2.jpg ...]
       $(data).each(function(){
         var img = $(' < img src = "'+this+'" / > ');
         $('#target ').append(img);//you can put your fade effect here if you like
       });
    }
  );  
});
于 2013-03-07T14:52:49.113 に答える
0

表示を高速化するには、すべての画像をプリロードする必要があるようです。そのために ajax を使用する必要はありません。Image オブジェクトを作成し、すべての URL を連続して適用するだけです。このようにして、ブラウザはそれらすべてをキャッシュし、要求されたときにキャッシュからそれらを提供するだけです.

var img = new Image(),
    urls = ['images/image.jpg','images/image2.jpg'],
    imgIdx = 0;

img.onload = function() {
    imgIdx++;
    if (imgIdx < urls.length) img.src = urls[imgIdx];
}

img.src = urls[imgIdx];
于 2013-03-07T15:19:22.587 に答える