JavaScript loading image freezes while making ajax call

Question

Hi,

I've built a page using jQuery that uses an async Ajax call. I'm trying to display a loading gif but for the life of me I can't get it to work. The gif never displays. Any ideas?

function updateCityList(state) {
        $("#city-loading").empty().html('<img src="/Images/loading.gif" />');
        $.ajax(
            {
                type: "GET",
                async: true,
                url: "/NPA/GetCities/" + state,
                dataType: "json",
                success: function(optionData) {
                    var options = [];
                    $(optionData).each(function(index, optionData) {
                        if ($('#cities option[value=' + optionData.Value + ']').length == 0)
                            options.push(optionData);
                    });
                    $("#cityList").fillSelect(options);
                }
            });
        $("#city-loading").empty();
    };

Answer 1

first you call:

$("#city-loading").empty().html('<img src="/Images/loading.gif" />');

then is the ajax call, since it is async code execution would continue and execute this:

$("#city-loading").empty();

You should hide the image in ajax callback:

function updateCityList(state) {
    $("#city-loading").empty().html('<img src="/Images/loading.gif" />');
    $.ajax(
        {
            type: "GET",
            async: true,
            url: "/NPA/GetCities/" + state,
            dataType: "json",
            success: function(optionData) {
                $("#city-loading").empty();
                var options = [];
                $(optionData).each(function(index, optionData) {
                    if ($('#cities option[value=' + optionData.Value + ']').length == 0)
                        options.push(optionData);
                });
                $("#cityList").fillSelect(options);
            }
        });
};

Answer 2

Your call to $.ajax() sets off the request and then immediately continues, because you're doing the call asynchronously. Hence the call to $("#city-loading").empty(); happens immediately.

You need to move the $("#city-loading").empty(); to the end of the success: function, so that it doesn't get called until the AJAX request completes.

Answer 3

I'll provide a code-free explanation. You are adding HTML to the DOM dynamically (the img src). The DOM has a natural latency that is independent of the Javascript execution. What this means is that your ajax call is made first, then the application downloads the image from the server.

Your best solution is to add the image to the page. Confirm that the image is loaded into the DOM. (add an id to the image object, and then use a query to confirm that you can access it). Then make your ajax call.

Another option might be to pre-load the image so there's no server download required.