Total Pageviews

Wednesday, November 20, 2013

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"/>");

});


Follow kvn_krishna on Twitter


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

});


Follow kvn_krishna on Twitter