0

I am using struts1. My website is loading quite slowly as it's doing some intensive calls. Any idea how I can get a div to say something similar to "loading" to show while the page prepares itself and then vanish when everything is ready?

Tom11
  • 2,419
  • 8
  • 30
  • 56

4 Answers4

0

Using ajax call your struts method and display loading div. When it finishes you can display another message. See examples on this page http://api.jquery.com/jQuery.get/

Alex
  • 11,451
  • 6
  • 37
  • 52
0

You can use jQuery to hide the div after the page is loaded.

Example.

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#loading").fadeOut();
    });
  </script>
</head>

<body>
  <div id="loading" style="background-color:red;width:100%;height:100px">
    Loading....
  </div>
</body>

</html>
seenukarthi
  • 8,241
  • 10
  • 47
  • 68
0

I think which is usefull for you

<script type="text/javascript">
        function callLoadingDiv(){
            // <![CDATA[
            $("#spinner").fadeIn("fast");
            // ]]>

        }
</script>
<style type="text/css">
#spinner {
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background: url(images/loading.jpg) 50% 50% no-repeat #ffffff;
   border:1px solid black;
   opacity:0.6;
   filter:alpha(opacity=60);
}
</style>

In onclick function or after form submission you have to call this callLoadingDiv() function.

Stephan
  • 41,764
  • 65
  • 238
  • 329
Suresh U
  • 463
  • 3
  • 14
0

using ajax call is best one for loading the image on top of that jsp

chakri
  • 629
  • 3
  • 11
  • 21