时间戳

首页 > 解决方案 > 在等待服务器端代码时显示加载器（没有空白页）

javascript - 在等待服务器端代码时显示加载器（没有空白页）

问题描述

我试图为每个页面制作一个加载器，但失败了。

我想在完成服务器端作业之前显示加载器：[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() 完成之前显示用户加载器。但是，当前状态是[Blank page] -> [Loader] -> [Target page]。

有没有什么奇特的方式先显示加载器，然后在每个页面的服务器端作业之后显示目标页面......？即[Loader] -> [Target page]。

谢谢阅读！

标签： javascriptjavahtmlspring-bootthymeleaf

解决方案

默认情况下，您可以将加载显示为块，并将内容显示为无。

ajax 完成后，只需隐藏加载并显示内容。

另外，请确保加载时覆盖整个页面。

推荐阅读