Question

我们想要显示一个＆＃34;正在加载......＆＃34;页面仍在传输时的图像。页面在我们的应用程序中会变得非常大。我尝试使用单独的页面显示图像，然后加载预期的页面，但动画GIF只是停止。

可以在页面上完成某些事情吗？或者有更好的方法吗？

感谢您的评论，一如既往！

更新

以下是我的小切换页面的一般概念：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
    <xp:div
        style="width:84.0px;height:84.0px;position:fixed;top:50%;left:50%;margin-top:0px;margin-left:0px;height:0px;width:0px;z-index:1000"
        id="AjaxLoader">
        <xp:image url="/loading.gif" id="image1">
        </xp:image>
    </xp:div>
    <xp:scriptBlock id="scriptBlock1">
        <xp:this.value><![CDATA[XSP.addOnLoad(function() {
    var href= getParameterByName("href");
    location.href= href;
});]]></xp:this.value>
    </xp:scriptBlock>
</xp:view>

Answer 1

加载＆＃34; loading＆＃34;页面优先于您要加载的页面不是一个选项。

您可以在HTML中创建DIV：一个用于加载图标（例如ID =＆＃34; loadingIcon＆＃34;），第二个用于内容（id =＆＃34; contentWrapper＆＃34;）。第二个是隐藏的（CSS样式=＆＃34;显示：无＆＃34;）。

定义一个这样的Javascript函数：

function pageLoaded(){
   document.getElementById("loadingIcon").style.display = "none";
   document.getElementById("contentWrapper").style.display = "";
}

脚本在BODY的onLoad事件中调用，如下所示：

<body onload="pageLoaded()">
...
</body>

Answer 2

这不是Web服务器环境的问题，而是您如何组织代码： - ）

采取您的方法并稍微修改它。而不是location.href = href - 只是触发重新加载，使用ajax调用并替换你的加载div。像这样：

<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[XSP.addOnLoad(function() {
var href= getParameterByName("href");
$.ajax({
   url: "test.html",
   context: $("#{id:AjaxLoader}");
 }).done(function(result) {
   $( this ).replace(result);
});
location.href= href;
});]]></xp:this.value>
</xp:scriptBlock>

（包含拼写错误，根据需要调整）

Answer 3

要回答我自己的问题：不，这不可能，但是无论如何，对于我来说，有一个很好的解决方法。

诀窍是打开一个新的浏览器窗口，在其中添加一些内容，然后加载新页面。

var w= window.open();
w.document.write("<div style='position: fixed; top: 48%; left:40%'>Loading...</div>");
w.location.href= url;

如有必要，可以用图像替换文本，并可以在超时后设置新的网址。

XPages：是否可以刷新HTML？

3 个答案: