Question

On my site I want to load “pages” dynamicly via jQuery’s load() function and I would like to add a loading animation.

function loadPage(){
  $("#content").load("example.html");
}

Where would I put code to show <div id="loading"></div> while jQuery loads that content??

Thanks In Advance.

Answer 1

Use the callback function of .load() to hide the loading div when it is finished.

function loadPage(){
    $('#loading').show();

    $("#content").load("example.html", function () { //calback function
         $('#loading').hide();
    });
}