在显示之前等待页面准备就绪

我很确定这是不可能的，但我可能是错的。我被要求保留一个网页，直到另一个页面准备好显示后者。在显示之前等待页面准备就绪

考虑例如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

在显示之前等待页面准备就绪

回答

相关问题