顯示加載功能，直到JSON數據加載從API

-1

我使用$ .getJSON從API獲取一些數據。一旦我收到信息，我會將信息附加到div上。但有時數據需要時間來加載，因此我想顯示一個加載功能，直到東西被附加到div。我該怎麼做呢？顯示加載功能，直到JSON數據加載從API

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>"); 
     }); 
    }); 
}

來源

2016-09-17 Ajayv

$ .getJSON是$ .ajax的快捷方式，您應該考慮閱讀$ .ajax的文檔：https：//api.jquery.com/jQuery.ajax/ – Marcs

您需要的Ajax調用

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

來源

2016-09-17 07:57:36 jeff

是的，它的工作謝謝你 – Ajayv

前顯示圖像，或任何容器元素添加一個微調圖像標籤。

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

在將數據附加到它之前，請刪除此圖像標記。

來源

2016-09-17 08:00:42 Vishal

顯示加載功能，直到JSON數據加載從API

回答

相關問題