1

使用 jQuery 和 Ajax 加载 img

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

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

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

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

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

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

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 回答