javascript - jsp 页面加载时的进度条

Question

我有一个 jsp 页面，它在浏览器上呈现内容之前在内部调用几个 java 类。整个过程需要1-2分钟，所以我想显示一些进度条或动画(最好是进度条)。浏览了 Stackoverflow 上的几篇文章，但没有得到太多信息。

尝试过pace.js以及一些javascript和jquery技术，但无法获得预期的效果。

如果有人帮助我提供一些现成的代码片段或链接或一些技巧来帮助我解决这个问题，那就太好了。

注意:我没有使用任何 servlet，完全使用 scriptlets 。

提前致谢。

Answer 1

向页面添加简单加载项的最简单方法是使用 gif 图像。我将使用 jQuery 来显示 gif，当内容准备好时将其隐藏。

我找到了这个片段，它可能会有所帮助:http://jsfiddle.net/msjaiswal/FAVN5/

.loadinggif {
    background:url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat right center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='inputsource' />
<br>
<button onclick="$('#inputsource').addClass('loadinggif');">Show Loading</button>
<br>
<button onclick="$('#inputsource').removeClass('loadinggif');">Hide Loading</button>