Question

我是一个jsp页面，它在浏览器上呈现内容之前会在内部调用几个java类。整个过程需要1-2分钟，所以我想显示一些进度条或动画（最好是进度条）。在Stackoverflow中经历过一些帖子并且无法获得更多。

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

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

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

提前致谢。

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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>

您对执行onsubmit表单操作的第一行，img标记以及javascript函数和进程按钮感兴趣。

很好的动画选择here

加载jsp页面时进度条

2 个答案: