简体   繁体   中英

Show loading image

I am building a web application using struts2. I am having a form the user clicks on submit button and I am processing the form and redirecting back to the same jsp page. I want to add the loading image so as the user can understand the request is being processed. I tried my way by writing the script after the end of form tag and adding the image inside the form but not able to get it right on submission of form. I am not using jquery , so the $.load() is not useful for me. Please can anyone help me in this.

Thanks in advance

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

If its a redirection - it means you are sending the content to the server and returning back, which ideally means on submit the current lifecycle of the page ends after posting information and new cycle begin when returning back.

One way to do this is to flush the loading image before you do any kind of business in your code from the server.

In .net we do it with two statements:

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

So even before the whole content is loaded back on the browser, a part of it is sent to the client.

I found a work around to see the loading image. Posting here so that other can be benefited.
I took a gif image and added it inside a div tag with css property display as block.

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

Then I have written a javascript function which I call on event onload.In this function I am setting the display property to none.

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

In my case I am setting display block when I am sending any server request and onload the setting back to display none.
Hope this is helpful for others.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM