Question

我有一个HTML表格。在每个单元格中都有一个图像，后跟一些文本。像这样：

<td>
  <img src='image.gif'>This is a test
</td>

我必须运行jQuery Ajax调用，在此调用期间，我想将图像更改为我拥有的加载图像（loading.gif），然后将其返回到常规图像（在本例中为image.gif） Ajax已经完成。

将图像更改为加载图像并再次返回的正确jQuery语法是什么？

Answer 1

我相信你的问题是关于如何在AJAX请求之前更改图像，然后在AJAX请求完成时将其更改回来。

以下是一个示例......以下是jQuery ajax() method的一些参考。注意：ajax（）方法包含声明成功，错误和完成函数的选项，这些选项可以在AJAX调用成功，错误输出或完成时（即成功或错误之后）执行。

<td>
  <img id="loadingImg" src='image.gif'>This is a test
</td>

$("#loadingImg").attr("src", "loading.gif");
$.ajax({ //other options here
  complete: function () {
  $("#loadingImg").attr("src", "image.gif");  // change image back when ajax request is complete
} });

Answer 2

更改图像相对容易：

$('img[src="image.gif"]').attr('src','path/to/new/image.png');

如果您的图片有id（$('#imageIDname')，只适用于一个图片元素）或class（{ {1}}虽然这适用于该类名的所有图像）。我不知道您是否要将其应用于所有$('.imageClassName')中的所有图像，或仅应用于一个特定的td元素。

将它与你的ajax调用相结合有点棘手，因为我不知道你的ajax调用是什么样的。

此外，这可能只是我的痴迷，你的元素应该是这样的：

img

请注意<img src='image.gif' />This is a test代码中的结尾/。

如何在Ajax调用期间使用加载图像替换TD内的图像

2 个答案: