How to show loading image in jsp using javascript?

Post date: Aug 8, 2011 10:25:19 AM

You can do this by using the power of setTimeout() method. This allows you set a timer to trigger a function call in the future, and calling it won't block execution of the current / other functions.

First, Position a div containing the spinner above the chart image, with it's css display attribute set to none:

<div> <img src="spinner.gif" id="spinnerImg" style="display: none;" /></div>

The nbsp stop the div collapsing when the spinner is hidden.

function startLoading() {

  //How long to show the spinner for in ms (eg 3 seconds)

  var spinnerShowTime = 3000

  //Show the spinner

  document.getElementById('spinnerImg').style.display = "";

  //Set the timeout on the spinner, if you required you can use it. else manually call 

//stop loadding

  setTimeout("stopLoading()", spinnerShowTime);

}

function stopLoading() {

  document.getElementById('spinnerImg').style.display = "none";

}

call these javascript where ever you required.

home.jsp

<script>

startLoadin();

</script>

Write your stuffs like loading google maps, loading videos.

<script>

stopLoading();

</script>