Question

如何在java编译时显示加载页面？

目前，我有一个Spring Boot应用程序加载到本地主机。我目前的申请需要大约15-30秒才能完成编译。我在页面加载时使用jquery来显示加载gif。但是在我的java / spring启动应用程序加载完成之前，它不显示我的加载页面。它将显示我正在运行的当前页面，直到我的java / spring启动应用程序运行完毕，然后它将简要显示我的加载页面（将数据加载到页面上时）。

如何在我的java应用程序仍在编译时显示加载页面？显示我选择的页面，而不是我正在使用的当前页面。

MyAttempt

的index.html

public OdbcDataReader ExecuteQuery(string sql)
{
   var cmd = new OdbcCommand(sql, connection);
   return cmd.ExecuteReader();
}

的style.css

<!-- Jquery  -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
})
</script>
<body>
<div class="loader">

<!-- my code -->

</div>

这是http://bradsknutson.com/blog/display-loading-image-while-page-loads/

提供的示例

更新

基本上我的页面将保留在当前页面上，同时浏览器加载循环加载（上面的“新标签”img旁边）。之后，我将收到我的加载页面（上面的代码），然后显示我的数据。我不想留在当前页面，我希望我的加载页面显示（浏览器上的圆圈正在加载（上面的“新标签”img旁边）。

Answer 1

如果显示浏览器加载图标，如何显示加载页面？

通过提供带有加载指示符的轻量级页面，加载指示符又使用ajax来请求加载或重定向到它的重页内容。

Answer 2

您还可以实现一个JS服务工作者，告诉用户该站点是否处于脱机状态。

但为了使其工作，用户需要在页面上至少一次下载服务工作者的注册。

首先创建一个offline.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Offline</title>
</head>
<body>
    Site currently compiling...
    <script>
        setInterval(() => location.href = '/', 1000);
    </script>
</body>
</html>

然后在你的主站点中将这个js行附加到某处：

navigator.serviceWorker.register('service-worker.js')
    .then(() => console.log("Service Worker registered"))
    .catch((err) => console.warn("Error:" + err));

创建服务工作者（直接来自https://hacks.mozilla.org/2015/11/offline-service-workers/）：

self.addEventListener('install', function(event) {
    // Put `offline.html` page into cache
    var offlineRequest = new Request('offline.html');
    event.waitUntil(
        fetch(offlineRequest).then(function(response) {
            return caches.open('offline').then(function(cache) {
                return cache.put(offlineRequest, response);
            });
        })
    );
});

self.addEventListener('fetch', function(event) {
    // Only fall back for HTML documents.
    var request = event.request;
    // && request.headers.get('accept').includes('text/html')
    if (request.method === 'GET') {
        // `fetch()` will use the cache when possible, to this examples
        // depends on cache-busting URL parameter to avoid the cache.
        event.respondWith(
            fetch(request).catch(function(error) {
                // `fetch()` throws an exception when the server is unreachable but not
                // for valid HTTP responses, even `4xx` or `5xx` range.
                return caches.open('offline').then(function(cache) {
                    return cache.match('offline.html');
                });
            })
        );
    }
    // Any other handlers come here. Without calls to `event.respondWith()` the
    // request will be handled without the ServiceWorker.
});

现在每次页面关闭时，都会显示离线页面。

如何在java应用程序编译时显示加载页面？

2 个答案: