JQuery Ajax，加载img答案

【问题标题】：JQuery Ajax, load imgJQuery Ajax，加载img
【发布时间】：2013-03-07 14:49:24
【问题描述】：

使用 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。我想先加载，然后在用户点击时快速淡入。我在这里简化案例只是为了更好地解释它）

【问题讨论】：

标签： jquery

【解决方案1】：

你为什么这样做，只是附加一个图像。

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

其他方式

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

【讨论】：

【解决方案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
       });
    }
  );  
});

【讨论】：

这是一个不错的选择。但我使用 Ajax 是因为我要加载很多 img。
@Nrc：图像数量并不重要。您仍然会将<img> 附加到您的目标。 ajax 的用处是检索图像的 JSON 数组 srcs
但是Ajax会让我先加载下一个img，当用户点击时，它会快速淡入

【解决方案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];

【讨论】：