Загрузка экрана во время выполнения функции JavaScript

Question

У меня следующий javascript-код, который загружает информацию из нескольких файлов json и добавляет их в таблицу HTML, если параметр «info» в URL-адресе имеет значение true.

$(document).ready(function(){
    var appList=["app1","app2","app3"];

    //function to get url parameters
    var parameters = new URL(window.location).searchParams;
    var info=parameters.get('info');

    if (info=="true"){
        for (var i=0;i<appList.length;i++){
            setInfoAndDateUtil(app)
        }
    }   

    function setInfoAndDateUtil(app){
        $.ajax({ 
            url:'server_name/'+ app + '/info.json'; 
            method: 'GET',
            dataType: 'json',
            contentType:'application/json',  
            success: function(jsonData){
                var info=jsonData.info;
                td=$("#" + app);
                td.text(info).css("text-align", "center");
            }
        })
    }

Ajax-запросы занимают некоторое время, так как онизагрузка около 16 файлов JSON.Поэтому я хочу добавить экран загрузки, пока эта функция выполняется.

Я пробовал несколько подобных методов, но ни один из них не работает.

$(document).ajaxStart(function(){
  $("#wait").css("display", "block");
});

$(document).ajaxComplete(function(){
  $("#wait").css("display", "none");
});

Может кто-нибудь сказать мне, как это сделать точно?

Answer 1

Используйте этот подход, используя JQuery:

// Add Loader on ajax calls
$("body").prepend("<div id='spinner'><img src='/images/spinner.gif'></div>");
$(document).ajaxSend(function(){
  $('#spinner').show();
});
$(document).ajaxComplete(function(){
   $('#spinner').hide();
});