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>