Question

我使用$ .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>");
        });
    });
}

Answer 1

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

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

Answer 2

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

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

在向其附加数据之前，请删除此图片代码。

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

2 个答案: