Question
I want to play a loader when any page is loading and it work stop when complete page is loaded. Any idea?
i am new in jquery or javascript.
-
Since you are new, I suggest to read the JavaScript Guide and a jQuery tutorial, if you haven't done so yet.Felix Kling– Felix Kling2011-08-04 08:22:26 +00:00Commented Aug 4, 2011 at 8:22
Add a comment
|
4 Answers
Just put a DIV on your page immediately with the loading graphic. Put this script anywhere on your page or at the top of an external script file:
$('BODY').append('<div id="loading"><img src="images/loading.gif" /></div>');
Obviously you'll need to style it to position it wherever you want. We do it this way rather than just hard-coding it into the page content so that anyone with JavaScript disabled won't see it.
Then attach to the load event to hide the loading DIV once the page is done. Put this script at the bottom of your page or inside a $(document).ready().
$(window).load(function() {
$('#loading').hide();
});
1 Comment
Goran Obradovic
If there is a masterpage, I would suggest that you put this div in its html, instead of appending it with jquery, as jquery might get loaded after html (while "loading" is shown), and only remove it when page is fully loaded.
You need to listen the event onload
window.onload = function() {
// do something
}
or in jquery
$(window).load(function() {
// do something
});
but with jquery a think is better to use :
$(document).ready(function() {
// do something
});
Comments
You can use ajaxStart and ajaxStop methods.
Demo:
http://www.balam.in/personal/triponetDemo/pre-loader.html
Click on view source to see the CSS and javascript. Have a div with id as loading and style the div to show the ajax spinner. Whenever an ajax method is triggered it will show the loading div and when the ajax request is completed, it hides the loading div.
Note that you need to have the loading div in all the pages where ever you want to show it.
1 Comment
chhameed
hi i want the same. But my page not use the ajax it refresh each time .
Well in case you want to show the ajax spinner on refresh,
check the link below: http://www.balam.in/personal/triponetDemo/pre-loader-refresh.html
View source to see the implementation
Everytime you refresh it will show the ajax spinner and when the DOM is ready it hides the ajax spinner.