jQuery .load when complete fade in and remove loading spinner

Question

I am using jQuery .load function to get 3 list items from other page. It is working perfectly, but I was wondering how to add "loading spinner" while content is loading and how to fade in my content, when it is loaded.

My code :

$('.homeProducts').load('http://localhost/products #product_list li:lt(3)');

P.S I don't know it is the right way to get those products, but it works for me.

Answer 1

The best was is using the global ajaxStart and ajaxStop events:

$('#yourSpinner').ajaxStart(function() {
    $(this).show();
}).ajaxStop(function() {
    $(this).hide();
});

The ajaxStart event will fire when the number of pending ajax requests raises from 0 to 1 and the ajaxStop event will fire when all ajax requests have finished.