2017-01-09 65 views
2

如何在java編譯時顯示加載頁面?如何在Java應用程序仍在編譯時顯示加載頁面?

Browser loading up

目前,我有一個加載了將本地主機彈簧啓動應用程序。我目前的應用程序需要大約15-30秒才能完成編譯。 我使用jquery在頁面加載時顯示加載gif。但是它不會顯示我的加載頁面,直到我的java/spring啓動應用程序完成加載。它會顯示當前頁面,直到我的java/spring啓動應用程序運行完畢,它會簡要顯示我的加載頁面(將數據加載到頁面上時)。

我的Java應用程序仍在編譯時如何顯示加載頁面?顯示我選擇的頁面,而不是當前的頁面。

MyAttempt

的index.html

<!-- 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> 

的style.css

.loader { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    background: url('ajax-loader.gif') 50% 50% no-repeat rgb(249,249,249); 
} 

這是通過http://bradsknutson.com/blog/display-loading-image-while-page-loads/

提供了一種示例

更新

基本上我的頁面將停留在當前頁面上,同時具有(以上旁邊的「新建選項卡」 IMG)的瀏覽器加載圈子加載。之後,我會收到我的加載頁面(上面的代碼),然後顯示我的數據。我不希望停留在當前頁面上,我希望我的加載頁面可以在瀏覽器加載時(在上面的「新選項卡」圖標旁邊顯示)。

+0

「如何在顯示瀏覽器加載圖標後立即顯示加載頁面?」 < - 由於瀏覽器首先必須加載您的加載頁面,這嚴格來說是不可能的。總會有一個小小的延遲。 –

+0

不幸的是,根據我的理解,這是不可能的。獲取請求的初始階段,即您仍在當前活動網站上的位置,即獲取。其速度通常取決於服務器,直到此步驟完成,瀏覽器沒有足夠的信息來顯示任何內容。 –

+1

謝謝,在頁面加載之前,不能將腳本添加到java中以重定向到頁面?我知道我做的嘗試不會工作,因爲它會等到我的java/spring應用程序完成加載,然後它甚至讀取我的html頁面。 –

回答

0

如何顯示加載頁面只要瀏覽器加載圖標顯示?

通過與負載指示,而這又或者使用Ajax請求要花這麼長時間來讀取或重定向到其重頁面內容服務的輕量級頁。

+0

我可以使用java在localhost:8080上顯示html頁面,直到完成編譯然後重定向到預期頁面爲止? –

0

你也可以實現一個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. 
}); 

現在,每當您的網頁發生故障時,離線頁面將會顯示WN。

+0

請[edit]在此處添加有意義的代碼和解決方案說明。郵政編碼,演示 您的解決方案。謝謝! – Peter

相關問題