加载jsp页面时的进度条答案

【问题标题】：Progress bars while jsp page is loading加载jsp页面时的进度条
【发布时间】：2023-03-11 01:31:01
【问题描述】：

我有一个 jsp 页面，它在将内容呈现在浏览器上之前在内部调用了几个 java 类。整个过程需要1-2分钟，所以我想展示一些进度条或动画（最好是进度条）。浏览了 Stackoverflow 中的几篇文章，但收获不多。

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

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

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

提前致谢。

【问题讨论】：

标签： javascript java jquery jsp progress-bar

【解决方案1】：

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

我找到了这个 sn-p，它可能会有所帮助：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>

【讨论】：

【解决方案2】：

我的 JSP 上有一个。

<form enctype="multipart/form-data" name=uploadSapFile  action="sapFileUploader.jsp" method="POST" onsubmit="block();">     
   <table border=0 width="50%">   
      <tr>
        <td colspan="2" align="center"><input id="process" type="submit" value="PROCESS"></td>
      </tr>
   </table>

   <img id="ajax-loader" src="../../../images/ajax-loader.gif" style="display: none;" />

   <script type="text/javascript">

   function block() {
       // This will add a "processing" animation while the system is busy with the file and also makes a "PROCESS" button deselected 
       document.getElementById('ajax-loader').style.display='block';
   }
   </script>
</form>

U 对执行onsubmit 表单操作的第一行、img 标记和 javascript 函数和处理按钮感兴趣。

还有很多不错的动画here

【讨论】：