Ajax loader

Good morning all,

I have a question about displaying an Ajax image before and after a request has completed.

Code:

---

    function createList(assetCollection, value, order) {
        showAjaxLoader(true, element);

        var sorted;
        var filteredList = [];

        // remove any duplicate Id's
        var n = 0;
        $.each(assetCollection, function (i, asset) {
            if (asset.Id != n) filteredList.push(asset);
            n = asset.Id;
        });

        switch (value) {
            case 'DisplayName':
                sorted = (order.toString().toLowerCase() == "desc") ? $(filteredList).sort(sortDisplayNameDesc) : $(filteredList).sort(sortDisplayName);
                break;
            case 'Type':
                sorted = (order.toString().toLowerCase() == "desc") ? $(filteredList).sort(sortTypeDesc) : $(filteredList).sort(sortType);
                break;
            case 'Rating':
                sorted = (order.toString().toLowerCase() == "desc") ? $(filteredList).sort(sortRatingDesc) : $(filteredList).sort(sortRating);
                break;
            case 'Downloads':
                sorted = (order.toString().toLowerCase() == "desc") ? $(filteredList).sort(sortDownloadsDesc) : $(filteredList).sort(sortDownloads);
                break;
            case 'DateCreated':
                sorted = (order.toString().toLowerCase() == "desc") ? $(filteredList).sort(sortRecentDesc) : $(filteredList).sort(sortRecent);
                break;
            default:
                sorted = (order.toString().toLowerCase() == "desc") ? $(filteredList).sort(sortDisplayNameDesc) : $(filteredList).sort(sortDisplayName);
                break;
        }

        buildAssets(sorted);

        showAjaxLoader(false, element);
    };

---

As you can see from that function above, I call a function called "showAjaxLoader". The boolean variables are to say whether to show or hide the ajax loader. As you can see I load the ajax loader at the start of the function, then hide it at the end.
My issue is that is not what happens. There is a delay before the ajax loader is displayed rather than showing it straight away, it looks like it loads the elements and then it shows the loader.

the function for the ajaxloader looks like this:

Code:

---

function showAjaxLoader(isLoading, target) {
    var ajaxLoader = '<div class="ajax"><img src="/Content/media/ajax-loader.gif" alt="Loading..." /></div>';

    if (isLoading) {
        target.css('position', 'relative');

        var h = target.height();
        var w = target.width();

        $(ajaxLoader)
                .css({
                    'display': 'none',
                    'position': 'absolute',
                    'left': '0',
                    'top': '0',
                    'z-index': '1000px',
                    'width': w + 'px',
                    'height': h + 'px'
                })
                .appendTo(target)
                .fadeIn();
    } else {
        $('.ajax', target).fadeOut('fast', function () {
            $(this).remove();
        });
    }
};

---

Any help would be greatly appreciated.

Cheers,
r3plica

Perhaps I'm looking at this too quickly and missing a finer point, but my guess would be that you have either the call to show the AJAX loader or hide the AJAX loader in the wrong place. I don't actually see any AJAX request code in there and obviously you want to show the AJAX loader before the request is made. Then using the readyState attribute you'd of course wait for the request to be complete and then execute some code to handle the responseText and finally hiding the AJAX loader.

So wherever the AJAX request is, you'll want your showAjaxLoader() function to appear before the .send() in your request. After the readyState is equal to 4 (meaning the request is complete of course) you'd probably then execute your createList() function which seems to handle the data; at the end of this function you'd then be hiding your AJAX loader.