Question

I am using the following code for displaying the products of an e-commerce website. While the products are being loaded, the images will slowly fade out and then will come again normal. I want to show an loading image (like this) when the new products are being loaded. What code should I include in the below code to get this done?

function displayProducts(){     

        $('#product_show').fadeOut('slow', function() {
        // Animation complete
            setProducts();
            $('#product_show').fadeIn('slow');
      });
}

Answer 1

I’m not sure what you’re #product_show element is, but assuming it is some sort of container, you can just append that image to it (maybe absolutely positioned in the middle). and when it compeletes, remove the image.

Something Like:

$('#product_show').append('<img src="..." class="progress"/>').fadeOut('slow', function() {
        // Animation complete
            setProducts();
            $('#product_show').remove('img.progress').fadeIn('slow');
});