CODEWITHSUNDEEP
jquery
snnlankrdsm
snnlankrdsm

Reputation: 1401

Showing page after loading page

I try to show my page after loading the page.

In order to do that,

 <div id ="loadingDiv">
        <img src="urltogif">
    </div>

I create above div and used the below js.

 $('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

but the gif image is always shown on the page. What is the reason for this?

Upvotes: 0

Views: 253

Answers (2)

Manse
Manse

Reputation: 38147

You need to make sure you jQuery code is executed after the page has completed loading and the DOM is ready, this can be done using the ready() function in jQuery :

$(document).ready(function() {
    $('#loadingDiv').hide() // hide it initially
    .ajaxStart(function() {
        $(this).show();
    }).ajaxStop(function() {
        $(this).hide();
    });
})​

Working example here - click the button to start the AJAX request - there is a 5 second delay on the response so you can see the "loading" div

Update

Based on your comment below - I think you want the div shown on page load and hidden when the page is loaded :

HTML :

<div id ="loadingDiv">
    <img src="urltogif">
</div>

this means its shown by default, the following jQuery will hide is once the page has completely loaded

$(document).ready(function() {
    $('#loadingDiv').hide();
});

Im not sure why you have the AJAX methods in there in this case !!!????!??? or perhaps I have totally miss read you question !

Upvotes: 1

Vimalnath
Vimalnath

Reputation: 6463

You need to include document.ready function at the top , so that the jQuery could be executed once the page is loaded completely.

Upvotes: 0

Related Questions