как показать изображение загрузки ajax рядом с кнопкой после нажатия, используя jquery

Question

У меня есть кнопка, которая запускает ajax get, что занимает много времени. Какой самый простой способ показать изображение загрузки AJAX ВПРАВО справа от кнопки.

я могу переместить кнопку позже в макете, поэтому я хотел, чтобы это было динамически (по сравнению с жестко закодированным div в макете)

после события click (до вызова ajax) я попробовал это:

    $(selector).append("<img src='/images/ajax-loading1.gif' />");

но это, похоже, ничего не делает

Answer 1

Вы, вероятно, хотите after вместо append.

$(selector).after("<img src='/images/ajax-loading1.gif' />");

Но с учетом удаления значка после завершения AJAX, как насчет:

$(selector).bind('click', function () {
    var spinner = $("<img src='/images/ajax-loading1.gif' />").insertAfter(this);

    jQuery.ajax({
        success: function (response) {
            // handle response

            spinner.remove();
        });
    });
});

Answer 2

Перед запуском вызова ajax используйте функцию after ():

$('.button').after('<img class="loading-ajax" src="/images/loading.gif" alt="Loading" />');

Затем, после завершения запроса ajax, удалите элемент:

$('.loading-ajax').remove();

Answer 3

Если проблема заключается в размещении изображения, то почему бы не использовать класс css с позиционированием (которое можно изменить при необходимости) как для изображения, так и для кнопки.

Если проблема в том, что ajax работает медленно, я думаю, нам нужна дополнительная информация.