如何添加加载图像

Question

我有一个使用spring mvc的java web应用程序（我没有使用hibernate，struts）。

在我的应用程序中，单击链接时会打开一个jsp页面。 jsp页面显示来自实时数据库的数据。打开页面时，计算完成（10秒）并渲染jsp页面（2秒）。

我尝试添加一个重定向页面，其中包含＆＃34; loading＆＃34; gif图像，但页面重定向时图像卡住（页面在1秒后重定向）。

我希望加载图像一直平滑，直到加载jsp页面。关于如何实现这个的任何想法？

Answer 1

使用jsps尝试的任何类型的重定向逻辑都无法正常工作。 最好的办法是使用ajax从服务器获取响应并动态呈现：

1. 用户点击重定向到report.jsp
2. 在report.jsp中显示您的加载图片
3. report.jsp使用ajax
从服务器请求报告数据
4. 一旦数据可用，请在正文中渲染并隐藏加载图像

Answer 2

加载gif应该在显示数据的同一页面上。

创建一个新页面，并在该页面上定义Gif和Report.jsp。

示例：

1. 创建report-container.jsp

2. 让它有以下行

   <div id="loadingImg" style="display:block;height:100%"> <img src="loading.gif"> </div> <jsp:include page="report.jsp">

3. 在report.jsp中，在最后添加一行：

   <script> if (document.getElementById("loadingImg")) { // change the "display" css style to "none". }</script>