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);
};
[/CODE]

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();
});
}
};[/CODE]

Any help would be greatly appreciated.

Cheers,
r3plica

Also in #JavaScript _↴