Hide loading gif after ajax callback

Question

I have a simple question but I couldn't find a clean answer. I need to load heavy images after an ajax call and I want to use an animated gif as a pre-loader. I'm using the follow code:

function loadProducts(url) {
    $("#loading").show();
    $('#inner').fadeOut(1).load(url + ' .product-list', function() {
        $('#inner').fadeIn(1000, function() {
            $("#loading").hide();
        });
    });
}

The #loading is hiding when the HTML is loaded .load(url + ' .product-list'. The problem is that the heavy images are still rendering on the screen and I would like to keep showing the animated .gif until the renders of the images are finished. Is there a way to know when the images on the screen are rendered?. Thanks in advance.

Answer 1

You can use promises to check when all the images have loaded, and then remove the loading gif.

This creates a promise that is resolved when the image has loaded, all the promises are kept in an array, and when all promises are resolved, i.e. all images are loaded, the callback fires.

function loadProducts(url) {
    $("#loading").show();

    $('#inner').fadeOut(1).load(url + ' .product-list', function() {

        var promises = [];

        $('#inner').find('img').each(function(_, image) {
            var img = new Image(), 
                def = new $.Deferred();

            img.onload = function() {
                def.resolve();
            }

            promises.push( def.promise() );

            img.src = image.src;
            if (img.complete) img.onload();
        });

        $.when.apply(undefined, promises).done(function() {

            $('#inner').fadeIn(1000, function() {
                $("#loading").hide();
            });

        });
    });
}