在我的项目中，我的JS从服务器接收信息，然后在HTML上显示它。但是，当我访问页面时，数据还没有完全加载，所以整个HTML都加载了，但数据没有。它迫使我等待X毫秒才能看到完成页面的最后一件事(数据)。
我想让所有的元素(div, span，按钮，我的数据)加载时，数据检索和准备显示。此外，我想通过显示一个简单的等待gif来做到这一点，以使用户对它有耐心，但我不确定如何做到这一点。
window.onload = ()=>{
var questionPlace = document.querySelector("#question-place");
displayPrevious(data, questionPlace);
}<head>
<script src='./scripts/index.js' type='module'></script>
</head>
<body>
<div class="flexbox-container" id="question-place"> <!-- data here --> </div>
<!-- buttons, divs, etc -->
</body>用$.when($.ajax()).then()代替window.onload:
选项1:
使用document.createElement:
//window.onload = () => {
$.when($.ajax("file.txt")).then((data, textStatus, jqXHR) => {
var elements = [];
elements.push(document.createElement('div'));
});
唯一应该在<body>中的元素是你的gif:
<body>
<img src="loading.gif" alt="Loading...">
</body>
选项2:
设置每个元素为display: none;:
<head>
<style>
* {
display: none;
}
</style>
</head>
<body>
<!-- other elements -->
<img src="loading.gif" alt="Loading..." onload="(event) => event.target.style.display = 'block'">
</body>
并再次等待调用完成并将所有内容设置为阻塞:
$.when($.ajax("file.txt")).then((data, textStatus, jqXHR) => {
$("*").css("display", "block");
});
可以隐藏任何"parent"元素，并在jQuery get请求的成功事件上取消隐藏。
参见:使用ajax和jquery完成工作后显示html