Question

首先，我对网络编程完全陌生 - javascript，css等。我知道一些HTML并且来自不同语言的脚本背景（lua，batch，shell等）。

所以，到目前为止，我正在创建一个网页，以显示从模拟器生成的一些统计数据到MySql数据库中。所以要显示它，我在想是否应该使用PHP，但最终因为我已经在服务器端使用Flask和Python，并且它不支持PHP，因此我决定通过javascript显示统计数据jquery的。

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

标签功能（从网上某处复制）：

function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    };

行处理程序，用于捕获单击该行并运行指向服务器的链接以获取该导航的数据：

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

获取每个试验名称的相关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; -->
    };

希望这是有道理的，或者我解释得足够好，正如我所说，我对javascript和Web服务器与客户端都是新手。

感谢您的帮助。

Answer 1

将所有内容放在<main>或其他内容中，然后将load()放在js脚本的最底部。

将<div id="loading"></div>放在<main>之外。

然后在function load()里面放了这个：

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

在CSS里面放这个：

main {
  display: none;
}

然后根据需要设置#loading的样式，使用旋转加载圈或加载文本或其他任何内容。

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

这允许在没有完全加载js文件时有内容。所以你应该把你的js文件放在body后面或body里面的底部，这样它首先加载html然后隐藏加载器并在js文件的末尾显示内容这将是在js完成加载之后。

Answer 2

找到答案：首先，谢谢你Cameron Samuels，你的答案让我朝着正确的方向前进。所以，这里缺少的部分是我正在使用JQuery - getJson从服务器端获取Json数据，因为我正在使用Cameron发送的加载屏幕进行一些试验和错误，它明确了问题没有在显示中解决（尽管可以通过检查tbody元素），而是在getJson完成时启动加载，回答如何做到这一点可以在这里看到 - How to catch a 400 response in jQuery getJSON call

希望这有助于任何达到这一点的人。

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

2 个答案: