Javascript 显示加载功能，直到从API加载JSON数据

我正在使用$.getJSON从API获取一些数据。一旦收到信息，我就会将其附加到div中。但有时数据加载需要时间，因此我想显示一个加载功能，直到有东西附加到div。我该怎么做

function getApis(){
    var source = document.getElementById('toplace').value;
    var dest = document.getElementById('fromplace').value;
    var options = "";
    var container = document.getElementById('div-form');
    var disp_info = document.getElementById('train-info');
    // var train_block = document.getElementById("train-block");
    container.style.display = 'none';   
    disp_info.style.display = 'inline-block';
    var url = "http://api.railwayapi.com/between/source/" + source + "/dest/" + dest +"/date/18-09/apikey/abvsl2868/";
    $.getJSON(url,function(data){
        console.log(data);
        // I WANT TO DISPLAY A LOADING FUNCTIONALITY UNTIL THIS DATA IS APPEARING ON THE SCREEN
        $("#train-info").append("Total Number of trains running from " + source + " to " + dest + " : " + data.total + "<br><br><br>");
        data.train.forEach(function(trains){
            options = "<div style='border:1px solid black;font-family:'Kaushan Script''> <br>Train Name : " + trains.name + "<br><br>" +"Train Number : " + trains.number + "<br><br>Departure Time : " + trains.src_departure_time + "<br><br> Arrival Time : " + trains.dest_arrival_time + "<br><br></div>";  
            // $('#train-block').append(options + "<br>");
            $('#train-info').append(options + "<br>");
        });
    });
}

函数getAPI（）{ var source=document.getElementById（'toplace'）.value； var dest=document.getElementById（'fromplace'）.value； var期权=”； var container=document.getElementById（'div-form'）； var disp_info=document.getElementById（'train-info'）； //var train_block=document.getElementById（“train block”）； container.style.display='none'； disp_info.style.display='inline block'； 变量url=”http://api.railwayapi.com/between/source/“+source+”/dest/“+dest+”/date/18-09/apikey/abvsl2868/”； $.getJSON（url、函数（数据）{ 控制台日志（数据）； //我想显示加载功能，直到此数据出现在屏幕上 $（“#列车信息”）。追加（“从“+source+”运行到“+dest+”的列车总数：“+data.Total+”

”； 数据.列车.forEach（功能（列车）{ options=“
列车名称：”+trains.Name+”

“+”列车号：“+trains.Number+”

发车时间：“+trains.src\u发车时间+”

到达时间：“+trains.dest\u到达时间+”

”； //$（“#列车区段”）。追加（选项+”
”； $（“#列车信息”）。附加（选项+”
”； }); }); }

---

在ajax调用之前，您需要显示图像或其他内容

$("#myDiv").html("<img src='spinner.gif'>");
$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: $("#myDiv").html("success");
});

$（“#myDiv”）.html（“”）；
$.ajax({
数据类型：“json”，
url:url，
数据：数据，
success:$（“#myDiv”）.html（“success”）；
});

在容器元素中添加微调器图像标记

<div id="#train-info"><img src="loading-spinner.gif"/></div>

---

在将数据附加到它之前，删除这个图像标签。

$.GETJSON是$Ajax的快捷方式，您应该考虑以$Ajax读取文档：