Question

使用jQuery和Ajax加载img

1-我尝试直接加载img，它不起作用：

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

2-我可以加载另一个html中的img。在这里我加载div目标img里面的img1里面的img：

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

2是使用Ajax和jQuery加载img的最佳方式还是有更好，更直接的方式？

（我使用的是Ajax，因为我需要加载很多img。我想首先加载，然后在用户点击时快速加载fadeIn。我在这里简化案例只是为了更好地解释它）

Answer 1

为什么要这样做，只需附加图片。

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

其他方式

$('<img/>', {
    src: 'img.jpg'
}).appendTo("#target");

Answer 2

为什么需要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
       });
    }
  );  
});

Answer 3

在我看来，您需要预先加载所有图像以便更快地显示。没有必要使用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];

JQuery Ajax，加载img

3 个答案: