Show loading image the 1st time the page is loaded

Question

I am using the following to show a loading image when something takes time to load.

<div class="divLoading"></div>

JS:

$("body").on({
    ajaxStart: function () {
        $(this).addClass("loading");
    },
    ajaxStop: function () {
        $(this).removeClass("loading");
    }
});

CSS

.divLoading {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
            url('../../Images/ajax-loader.gif') 
            50% 50% 
            no-repeat;
}  
body.loading {
    overflow: hidden;   
}
body.loading .divLoading {
    display: block;
}

But this is not working for the 1st time the page is loaded. I want to show this loading image as soon as I log in to my site, until the content of the page is loaded completely.Can you please help me on it. Thanks.

http://stackoverflow.com/questions/1853662/how-to-show-page-loading-image-div-text-until-the-page-has-finished-loading-rend — Renjith, Dec 19 '12 at 10:16

score 0 · Answer 1 · answered Dec 19 '12 at 10:38

0

Remember to put this code before closing head tag.

<script>
$(window).load(function(){
  $('#dvLoading').fadeOut(2000);
});
</script>

answered Dec 19 '12 at 10:38

palaѕн

72,112
17
116
136

But I do not know how much time it will take to load for the first time. So I can not use the timer.I want to show the loader until the page gets loaded completely. – Megha Chakraborty Acharyya Dec 19 '12 at 12:22
You want something like this [jsfiddle.net](http://jsfiddle.net/jquerybyexample/ssqtH/embedded/result/) ?? – palaѕн Dec 19 '12 at 12:52

Show loading image the 1st time the page is loaded

1 Answers1