javascript函数执行时加载屏幕

Question

如果 URL 中的“info”参数为真，我有以下 javascript 代码，它从多个 json 文件加载信息并将它们附加到 HTML 表中。

$(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();
});