hide div on jquery .load function

Question

I have created this function in JQuery:

function OpenPage(pagename) {
    var page = pagename
    $('#LoadingDiv').show();
    $('.tabcontent').load(page);
    $("html, body").animate({ scrollTop: 0 }, "slow");
    window.onload = function () {
        $('#LoadingDiv').hide();
    }
}

it loads the selected page into a DIV using .load

before loading the page, its shows a div with a loading bar image, how can i hide this loading div once the page using .load has finished loading

i added window.onload at the end of my function but its not hiding the div

charlietfl · Accepted Answer · 2015-01-11 17:09:11Z

2

Use the complete callback of load( url [, data ] [, complete ] )

function OpenPage(pagename) {
    var page = pagename
    $('#LoadingDiv').show();
    $('.tabcontent').load(page, function(){
        /* new html exists now */
        $('#LoadingDiv').hide();
    });
    $("html, body").animate({ scrollTop: 0 }, "slow");    
}

Reference: load() Docs

answered Jan 11, 2015 at 17:09

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2015-01-11 17:09:25Z

0

Use Callback Function of .load() function

A callback function that is executed when the request completes.

Change your code as

function OpenPage(pagename) {
    var page = pagename
    $('#LoadingDiv').show();
    $('.tabcontent').load(page,function () {
        $('#LoadingDiv').hide();
    });
    $("html, body").animate({ scrollTop: 0 }, "slow");
}

answered Jan 11, 2015 at 17:09

Satpal

134k13 gold badges168 silver badges171 bronze badges

Collectives™ on Stack Overflow

hide div on jquery .load function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related