adding a animated image while jquery ajax is working

I am using Jquery Ajax, my code looks like this

 $.get(
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigat开发者_如何学GoionFlag = false;
    },
    'html'
);

I need to add a animated gif that will appear while the ajax is working and then disappear when the ajax finishes.

How can i do that?

I have a different logic and solution.

Set a div where you want the gif image to appear like <div id="loader">.

Next, Set it a background image in css and don't set the image link like;

background: no-repeat center;

and when ajax execute, give it a background image loader.gif and remove it when ajax task completes, like;

 $.get(
    $("#loader").css({ 'background-image':'url(images/loader.gif)' });
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigationFlag = false;
        $("#loader").css({ 'background-image':'url()' });
    },
    'html'
);

I have not tested it myself.. Hope this helps..

I normally do something like this:

$("#indicatordiv").show();
$.post("somepage", function(result){ 
    $("#indicatordiv").hide();
})

Where "indicatordiv" is a simple div element containing the loader gif image.

So in your case, just ".show()" the element before the get request, and ".hide()" it inside the response function.

you can add a div which contains an image tag with loader image. Initially hide the div. Before calling the ajax request show the div. and after getting data from ajax request hide the div.

$("#dvLoader").show();
$.get(
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigationFlag = false;
    },
    'html'
    success:
         function(data)
         {
            $("#dvLoader").hide();
         }

);

dvLoader contains an the loader image.