javascript加载屏幕，直到数据加载

首先，我对网络编程一无所知——javascript、css等。。 我知道一些HTML，来自不同语言（lua、batch、shell等）的脚本编写背景

所以，说到这里，我正在创建一个网页，将模拟器生成的一些统计数据显示到MySql数据库中。 为了显示它，我在考虑是否应该使用PHP，但最终因为我已经在服务器端使用了Flask和Python，而且它不支持PHP，所以我决定通过javascript和jquery显示统计数据

所以它的工作方式是，我有一个带有选项卡的顶部菜单，每次单击一个选项卡时，它都会显示该页面，在其中一个页面中，我们可以单击其中一个表行导航到另一个选项卡，问题是，在数据加载到该选项卡中的表之前，该选项卡会显示

制表符功能（从网上某处复制）：

函数openCity（evt，cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

行处理程序捕获单击该行并运行到服务器的链接以获取该飞行员的数据：

function addRowHandlers() {
        var table = document.getElementById("pilotsOverview");
        var rows = table.getElementsByTagName("tr");
        for (i = 0; i < 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);
        }
    }

函数addRowHandlers（）{
var table=document.getElementById（“pilotsOverview”）；
var rows=table.getElementsByTagName（“tr”）；
对于（i=0；i

函数获取每个试点名称的相关GUID，从服务器启动数据加载并单击选项卡。 发生的情况是，数据加载之后，首先显示选项卡，需要找到一种方法来运行加载程序，直到这些功能完成-pilotsoverview，pilotinfo

function myFunction(pilotname) {
        if (pilotname == null)
        {
            var pilotname = document.getElementById("list_players").value;
        }
        var ucid;
        for (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; -->
    };

函数myFunction（pilotname）{
if（pilotname==null）
{
var pilotname=document.getElementById（“list_players”）.value；
}
变种ucid；
for（所有Pilotar中的var键）{
if（pilotname==allpilotar[key]）
{
ucid=密钥；
}
};
document.getElementById（“demo”）.innerHTML=“加载”+pilotname+“引导统计”；
控制台日志（ucid）
飞行员概述（ucid）
pilotinfo（ucid）
document.getElementById（“pinfo”）。单击（）；
};

希望这是有意义的，或者我解释得足够好，就像我说的，我对javascript和web服务器与客户端都是新手

---

感谢您的帮助。

将所有内容放在

或其他文件中，然后将

load（）

放在js脚本的最底部

将

放在

外

然后在

函数加载（）中放入以下内容：

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

main {
  display: none;
}

在CSS中放置以下内容：

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

main {
  display: none;
}

然后用旋转的加载循环或加载文本或其他方式，根据需要设置
#load
的样式

如果您希望在某个任务之后而不是在页面首次加载时完成加载，那么您将在该函数中放入
load（）
，以显示内容，就像加载完成一样

这允许在未完全加载js文件时存在内容。因此，您应该将js文件放在
body
之后的底部，或者放在
body
内部的末尾，这样它会先加载html，然后隐藏加载程序，并在js文件末尾显示内容，这将是在js完成加载之后。
找到答案：
首先，谢谢卡梅隆·萨缪尔，你的回答为我指明了正确的方向。
因此，这里缺少的部分是，我正在使用JQuery-从服务器端获取Json数据，因为我使用Cameron发送的加载屏幕进行了一些尝试和错误，它清楚地表明问题没有在显示中得到解决（尽管可以通过检查tbody元素来解决），而是在getJson完成时启动加载，在这里可以看到如何进行加载的答案-

希望这能帮助任何人达到这一点。
谢谢，我将在这里尝试并返回一个响应。它似乎不起作用，在从服务器加载数据之前选项卡打开，一两秒钟后，您可以看到数据填充到表中。是否有一种方法可以等待数据填充并仅在运行load（）函数后执行？然后将load（）放在加载数据的函数的末尾，而不是js文件的末尾。加载正好在一个数组被填充之后，该数组链接到一个div，如so-
var$pilotInfoArr=$（“#pilotInfoArr”）
点击一下#pinfo做什么？您可能希望将加载放在onclick（）函数中。