在XPage中加载指示器初始加载

Question

我的Xpage需要花费很多时间才能加载。所以我被要求制作一个加载指示器，只有在页面完全正常工作时才会消失 我尝试使用XSP.startAjaxLoading()，但我无法弄清楚我放置XSP.endAjaxLoading()的位置。

Answer 1

创建一个轻量级的快速加载XPage

• 显示客户端的加载指示器和
• 在onClientLoad事件中使用window.location = "your.xsp"调用您真正的初始XPage。

只要尚未呈现主XPage，这将显示加载指示符。

Answer 2

尝试pace.js（http://github.hubspot.com/pace/docs/welcome/） Domino教程可在此处获取：http://planetlotus.org/profiles/frankvanderlinden_142706

Answer 3

有很多方法可以做到这一点，但最简单的方法是创建一个不断显示客户端加载的div，这可以通过编写一个简单的css来实现。

以下css是从w3school复制的： 的 CSS：

.loader {
       border: 5px solid #f3f3f3; /* Light grey */
       border-top: 5px solid #3498db; /* Blue */
       border-radius: 50%;
       width: 40px;
       height: 40px;
       animation: spin 2s linear infinite;
   }

   @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
   }

显示加载的脚本：

function showLoad() {
	document.getElementById("spinner").style.display = 'block';
}

划分为xpage：

<div class="loader" id="spinner" style="display:none"></div>
<xp:button value="Display Load" id="button1">
<xp:eventHandler event="onclick" submit="false">
  <xp:this.script><![CDATA[showLoad();]]></xp:this.script>
</xp:eventHandler></xp:button>

我希望这会有所帮助。