显示加载图片

时间:2013-01-03 11:10:33

标签: javascript html javascript-events

我正在使用struts2.构建一个Web应用程序我正在使用用户单击“提交”按钮的表单,我正在处理表单并重定向回相同的jsp页面。 我想添加加载图像,以便用户可以理解正在处理请求。 我试着通过在表单标记结束后编写脚本并在表单内添加图像但在提交表单时无法正确使用。 我没有使用jquery,因此$.load()对我没用。 请允许任何人帮助我。

提前致谢

<script type="text/javascript">
    (function(d) {
        alert("in");
        d.getElementById('loginform').onsubmit = function () {
            alert("on submit");
            d.getElementById('submit').style.display = 'block';
            d.getElementById('loading2').style.display = 'block';
        };
    }(document));
</script>

2 个答案:

答案 0 :(得分:1)

如果是重定向 - 这意味着您要将内容发送到服务器并返回,这理想情况下意味着在发布信息后提交页面的当前生命周期,并在返回时开始新的周期。

执行此操作的一种方法是在从服务器对代码执行任何业务之前刷新加载映像。

在.net中我们用两个陈述来做:

 Response.Write("your loading image in html format");
 Response.Flush();

因此,即使在将整个内容加载回浏览器之前,也会将其中一部分内容发送给客户端。

答案 1 :(得分:0)

我找到了一个可以查看加载图像的工作。在此发布,以便其他人可以受益。
我拍了一张gif图像并将其添加到div标签中,其中css属性显示为块。

<div id="loading" style="position:absolute; width:100%; text-align:center; top:200px">
<img src = "images/loading.gif" width="70px" height="70px"/> </div>

然后我编写了一个javascript函数,我在事件onload上调用。在这个函数中我将display属性设置为none。

function stopLoading()
   { 
     document.getElementById('loading').style.display='none';
   }

在我的情况下,当我发送任何服务器请求并将设置重新载入显示无时,我正在设置显示块。
希望这对其他人有帮助。