Загрузчик изображений во время процесса AJAX / JSON

Question

Я пытался показать загрузчик изображений, который будет покрывать весь документ во время ajaxStart, и скрывать на ajaxStop следующим образом:

Сценарий:

$(this).ajaxStart(function(){
         $().addClass('imageLoader');
    });

    $(this).ajaxStop(function(){
           $().removeClass('imageLoader');
    });

CSS:

.imageLoader { 
background: #f5f3e5 url('images/common/loading.gif') 50% no-repeat; top }

Изображение не отображается должным образом, хотя я знаю, что ajaxStart / Stop работают, когда я тестировал его с другим примером кода (например, изменил цвет текста на красный).

Есть ли лучший способ реализовать это?Кажется, я не понимаю, в чем проблема.

Answer 1

Было бы проще, если бы вы создали скрытый div с классом и показали / скрыли его

<div style="display:none" class="imageLoader" id="loader"></div>

$(this).ajaxStart(function(){
         $('#loader).show();
    });

    $(this).ajaxStop(function(){
         $('#loader).hide();
    });