jquery on load function

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.

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();
});

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
});

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.

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.