Showing a div while page is loading, hiding when its done

Question

I want to show a div with a loading animation over my page while the page loads some XML content. Once its loaded, I want to hide this div. How can I go about doin

Answer 1

$.ajax({
    url: '/test.xml',
    beforeSend: function(XMLHttpRequest) {
        // Show the div before sending the request
        $('#load').show();
    },
    complete: function(XMLHttpRequest, textStatus) {
        // Hide the div no matter if the call succeeded or not
        $('#load').hide();
    },
    success: function(xml) {
        // if the request succeeds do something with the received XML           
    }
});