Как показать «загрузчик» каждый раз, когда с помощью jQuery выполняется новый вызов ajax?

Question

Я хочу показывать значок загрузки / изображение каждый раз, когда выполняется вызов ajax. В моем случае мой код, изображение показывается один раз, и все .Даже если в цикле for есть несколько вызовов ajax, изображение отображается один раз и исчезает при первом успешном завершении первого вызова ajax.

Это мой код:

function ajaxCall(ajaxObject){ 
     $.ajax({
        type: 'GET',
        url: 'url/' + ajaxObject,

        beforeSend: function(){
            $("#someid").LoadingOverlay("show");
        },
        success: function (imagesList) {
            showGenerated(imagesList);
        },
        complete:function(){
            $("#someid").LoadingOverlay("hide", true);

        },
        error: function () {
            console.log('error imaging processing');
        }
    });
} 
jsObject = JSON.parse(listImages.attr("data-images"));

    for (i = 0; i < jsObject.length; i++) {
        ajaxCall(jsObject[i].filesID);
    }

Я также пытался использовать $(document).ajaxStart(function(){}).ajaxStop(function(){});, но результат тот же , , «загрузочный счетчик» показывает только один раз и исчезает, когда ВСЕ ВЫЗОВЫ AJAX ЗАВЕРШЕНЫ ...

На вкладке сети в отладке Chrome показано несколько запросов на получение ajax, поэтому существует больше вызовов ajax, но спиннер / загрузка выглядит так, как будто это был только один вызов ajax.

Поэтому я хочу, чтобы изображение появлялось и исчезало при каждом новом вызове ajax.

Answer 1

Вы должны делать это для каждого вызова ajax, на вызов ajax, который вы должны показать, и после получения ответа, скрывающего его, как то, что вы делаете сейчас.

другая возможность - вам нужно добавить этоткак и во всем мире с этими последующими функциями ajax ajaxStart и ajaxStop

$('#loading-image').bind('ajaxStart',
 function(){
$(this).show();
}).bind('ajaxStop',function(){
$(this).hide();});

Документацию можно найти здесь AjaxStart