html - javascript loading screen until data loads -

first, i'm totally new web programming - javascript, css etc.. know html , coming background of scripting in different languages (lua, batch, shell etc..).

so, point, i'm creating webpage display statistics data being generated simulator mysql db. display it, thinking if should go php, because i'm using flask , python on server side, , not support php, therefore decided display stats through javascript , jquery.

so way works is, have top menu tabs, each time tab clicked should show page, in 1 of pages, can click 1 of tables rows navigate tab, problem is, tab shown before data loads tables in tab.

tab function (copied somewhere on net):

function opencity(evt, cityname) {         var i, tabcontent, tablinks;         tabcontent = document.getelementsbyclassname("tabcontent");         (i = 0; < tabcontent.length; i++) {             tabcontent[i].style.display = "none";         }         tablinks = document.getelementsbyclassname("tablinks");         (i = 0; < tablinks.length; i++) {             tablinks[i].classname = tablinks[i].classname.replace(" active", "");         }         document.getelementbyid(cityname).style.display = "block";         evt.currenttarget.classname += " active";     }; 

row handler catch clicking row , run link server data pilot:

function addrowhandlers() {         var table = document.getelementbyid("pilotsoverview");         var rows = table.getelementsbytagname("tr");         (i = 0; < rows.length; i++) {             var currentrow = table.rows[i];             var createclickhandler =                  function(row)                  {                     return function() {                                              var cell = row.getelementsbytagname("td")[0];                                             var id = cell.innerhtml;                                             myfunction(id)                                      };                 };              currentrow.onclick = createclickhandler(currentrow);         }     } 

function relevant guid each pilot name, initiate data load server , click tab. happens data loads later , tab first shown, need way run loader until these functions finished - pilotsoverview, pilotinfo.

function myfunction(pilotname) {         if (pilotname == null)         {             var pilotname = document.getelementbyid("list_players").value;         }         var ucid;         (var key in allpilotarr) {             if (pilotname==allpilotarr[key])             {                 ucid = key;             }         };         document.getelementbyid("demo").innerhtml = "loading "+pilotname+" pilot statistics";         console.log(ucid)         pilotsoverview(ucid)         pilotinfo(ucid)         document.getelementbyid("pinfo").click();         <!-- location.href='/statistics/'+ucid; -->     }; 

hope makes sense or explained enough, said i'm new javascript , web server vs client side.

thanks help.

put in <main> or , put load() @ bottom of js script.

put <div id="loading"></div> outside <main>.

then inside function load() put this:

document.queryselector('main').style.display = "block"; document.queryselector('#loading').style.display = "none"; 

inside css put this:

main {   display: none; } 

then style #loading want, spinning loading circle or loading text or whatever.

if want finished loading after task , not when page first loads, put load() inside function show content if done loading.

this allows there content when hasn't loaded js file. should put js file @ bottom after body or @ end inside body loads html before first , hide loader , show content @ end of js file after js has finished loading.