How can I replace image inside a TD with loading image during Ajax call

Question

I have an HTML table. In each cell there is an image followed by some text. Something like this:

  This is a test


        

Answer 1

To change the image is relatively easy:

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

The selector could be improved if your image had an id ($('#imageIDname'), which would apply only to that one image element) or class ($('.imageClassName') though that would apply to all images of that class-name). I don't know if you want to apply this to all images in all tds or just to one particular img element.

Coupling that to your ajax call is a little trickier, since I have no idea what your ajax call looks like.

Also, and this might be just my obsessiveness, your element should look like:

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

Note the trailing / in the img tag.

Answer 2

I believe your question is regarding how to change an image before an AJAX Request and then change it back when the AJAX request is finished.

Well below is a sample...and here is some reference to the jQuery ajax() method. Note: the ajax() method contains options to declare success, error and complete function that can be executed when the AJAX call is successful, errors out, or is completed (ie after either success or error).

<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
} });