Add loader until the page loads completely

This code used to show the loader until the page loads.......

var overlay = jQuery('<div id="overlay"> </div>');
overlay.appendTo(document.body)
$(window).load(function() {
 $('#overlay').html("<img src="ajaxLoader.gif" class="ajaxLoader"/>");

});

Ajax Loader, $.getJSON Loader,

Just copy Paste on ur Script top,

It defines globally so no need add again and again for ajax events. It will fire for the jQuery Ajax events.



var cssOverlayOption = {
"position": "fixed",
    "top": 0,
    "left": 0,
    "width": "100%",
    "height": "100%",
    "background-color": "#000",
    "filter":"alpha(opacity=50)",
    "-moz-opacity":"0.5",
    "-khtml-opacity": "0.5",
    "opacity": "0.5",
    "z-index": 10000
};

var loaderImageCenter = {
"position":"relative",
"top":"50%",
"left":"50%"
};
var overlay = jQuery('<div id="overlay"><img src="images.jpg" id="loaderImage" width="99" height="102" title="Loading..." align="middle"  /> </div>');
overlay.appendTo(document.body);


$(document).ajaxStart(function() {
$("#loaderImage").css(loaderImageCenter);
    $("#overlay").css(cssOverlayOption).show();

});