在顯示之前等待頁面準備就緒

我很確定這是不可能的，但我可能是錯的。我被要求保留一個網頁，直到另一個頁面準備好顯示後者。在顯示之前等待頁面準備就緒

考慮例如pageA.html，其中包含pageB.html的鏈接。 pageB有一些創建頁面的jScript（實際上是GWT，但假裝你不知道）。

用戶希望繼續顯示pageA，直到pageB準備好顯示。這是可能的，保持兩個頁面分開？

2014-03-19 algiogia

你試過使用預渲染嗎？ https://developers.google.com/chrome/whitepapers/prerender和prefetch http://davidwalsh.name/html5-prefetch – atmd

第二頁包含動態內容和各種異步調用，所以我不知道內容，直到我提交第一頁 – algiogia

你可以看看AngularJS。（SPA =單頁應用程序）。您可以在當前頁面加載新視圖（「頁面」），並顯示加載器或當前頁面，直到加載完成。

來源

2014-03-19 13:19:30

你有樣品嗎？ –

http://yearofmoo-articles.github.io/angularjs-2nd-animation-article/app/#/ 所有視圖都加載在背景上。學習AngularJS並不難，但它不是一個插件。它是一個完整的框架。 –

SPA將是最好的選擇，並且是應該使用GWT的方式，但是該應用程序已經在多個頁面中開發，現在我們無法重構所有內容。 – algiogia

你可以做到這一點使用上pageA.html中JavaScript和Ajax

<script> 
    function loadPageB(){ 
    var html = document.getElementById("html"); 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    html.innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","pageB.html",true); 
xmlhttp.send(); 
} 
</script>

HTML頁面

<!-- some code here --> 
<input type="button" value="go to PageB" onclick="loadPageB()"/> 
<!-- some code here -->

在上面的例子中點擊按鈕，它會載入後pageB.html

來源

2014-03-19 13:59:10 user3091574

但是，這將加載pageA中的pageB內容，而不是實際導航到pageB，對不對？ – algiogia

你可以使用jQuery $(window).load(function(){});並在現有頁面上創建疊加層。

I.e.用戶加載頁面A，並且可以立即看到疊加層，從而阻止頁面的可見性。當加載事件被觸發時，您可以刪除覆蓋圖。

這與您所問的內容稍有不同，但可能是一種方法。

JS Fiddle Example

來源

2014-03-19 14:22:39

我們已經有了類似的地方（加載指示器隱藏不完整的頁面），但客戶端不喜歡它:) – algiogia

你可以隨時查看URL，直到存在的頁面。這意味着您想要重定向到的頁面尚不存在，並且將在某個時刻創建。

的鏈路可以是

<a href="javascript:;" onclick="delayRedirectTo('my-generated-page.html');">link text</a>

然後包裹一些邏輯在delayRedirectTo功能。

function delayRedirectTo(path){ 
    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange=function(){ 
     // Status will only be 200 when the page exists 
     if (xhr.readyState==4 || xhr.status == 200) 
     { 
      // Redirect to page. 
      window.location.href = path; 
     } 
    } 
    window.setInterval(function(){ 
     xhr.open("GET",path,true); 
     xhr.send(); 
    }, 5000); // check every 5 seconds. 
}

來源

2014-03-19 14:38:00 Ally

在顯示之前等待頁面準備就緒

回答

相關問題