javascript 加载屏幕直到数据加载

Question

首先，我对网络编程完全陌生 - javascript、css 等。 我了解一些 HTML，并且有不同语言(lua、batch、shell 等)编写脚本的背景。

所以，到目前为止，我正在创建一个网页来显示从模拟器生成到 MySql DB 的一些统计数据。 为了显示它，我在想是否应该使用 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加载完成后的内容。