【发布时间】：2022-05-07 00:43:17
【问题描述】：
我尝试为每个页面制作一个加载器，但失败了。
我想在完成服务器端作业之前显示加载器：[Loader] -> [Target page]。
但是，HTML 是在服务器端作业之后加载的，所以我可以在空白页之后看到加载器：[Blank page] -> [Loader] -> [Target page]。
这里是示例 HTML 代码 (sample.html)，
<body>
<!-- loading image -->
<div id="loading">
<img id="loading-image" src="/img/loading.gif" alt="Loading..."/>
</div>
<section class="content">
<span th:text="${data_list}"></span>
</section>
<script type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>
</body>
和 Java 代码 (Controller.java)。
@RequestMapping(
method = RequestMethod.GET,
path = "sample"
)
String hosts(Model model) {
model.addAttribute("data_list", service.getAllData());
return "sample";
}
service.getAllData() 需要很长时间，所以我想在 service.getAllData() 完成之前显示用户加载器。但是，目前的状态是[空白页] -> [加载器] -> [目标页]。
有没有什么奇特的方式先显示加载器，然后在每个页面的服务器端作业之后显示目标页面？即[Loader] -> [Target page]。
【问题讨论】：
标签： javascript java html spring-boot thymeleaf