Gif загрузчика не работает должным образом в jQuery

Question

Это создает загрузчик, но не работает должным образом и не вращается на странице, или перед загрузкой страницы загрузчик скрывается
Домашняя страница html: -

<div id="wait" style="position:absolute;top:50%;left:50%;padding:2px;"><img src='../../assets/images/icons/loader.gif'/></div>

Другие страницы HTML: -

<div id="VivaData">
  some content
</div>

jquery: -

 $(document).ajaxStart(function(){
   console.log('start ajax');
   $("#wait").css("display", "block");
 });
 $(document).ajaxComplete(function(){
   console.log('ajax complete');
   $("#wait").css("display", "none");
 });
 $("#VivaData").load("demo_ajax_load.asp");

Answer 1

Попробуйте использовать jquery ajax.

запускать загрузчик при вызове функции ajax и скрывать его после завершения ajax.

function test(){
    //start loader
    $("#wait").css("display", "block");

    //perform any ajax operation
    $.ajax({
        url: "test.html",
        context: document.body
    }).done(function() {
        //close loader
        $("#wait").css("display", "none");
    });
}