Question

Here is my ‘getContent’ functions which takes a URL:

function getContent(url, callback) {
    var request = new Sys.Net.WebRequest();
    request.set_url(url);
    request.set_httpVerb("GET");
    var del = Function.createCallback(getContentResults, callback);
    request.add_completed(del);
    request.invoke();
}

What I’d like to do is display a loading image when this is called and then hide it when the callback is complete?

Can any suggest antying?

Answer 1

You can use the jQuery .load() function to load your HTML, then use the .ajaxStart() and .ajaxStop() event handlers to show and hide the loading animation.

Here is an example:

$(document).ready(function() {
    $("#loadlink").click( function() {
        $("#container").load( "load.htm" );
    });

    $("#loadlink").ajaxStart( function() {
        console.log("start");
    });

    $("#loadlink").ajaxStop( function() {
        console.log("stop");
    });

});