Как я могу заменить изображение внутри TD с загрузкой изображения во время вызова Ajax

Question

У меня есть таблица HTML. В каждой ячейке есть изображение, за которым следует текст. Примерно так:

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

Я должен выполнить вызов jQuery Ajax, и во время этого вызова я хочу изменить изображение на имеющееся у меня загрузочное изображение (loading.gif), а затем вернуть его на обычное изображение (в данном случае image.gif) после Аякс завершен.

Каков правильный синтаксис jQuery для изменения изображения на загрузочное изображение и обратно?

Answer 1

Я полагаю, что ваш вопрос касается того, как изменить изображение перед запросом AJAX, а затем вернуть его обратно, когда запрос AJAX завершится.

Ниже приведен пример ... и приведена ссылка на метод jQuery ajax () . Примечание. Метод 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 ($('.imageClassName'), хотя это будет применяться к все изображений этого имени класса). Я не знаю, хотите ли вы применить это к всем изображениям во всех td с или только к одному конкретному img элементу.

Связать это с вашим вызовом ajax немного сложнее, поскольку я понятия не имею, как выглядит ваш вызов ajax.

Кроме того, и это может быть просто моей одержимостью, ваша стихия должна выглядеть так:

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

Обратите внимание на конечный / в теге img.