Question

I have a javascript that retrieves the values checked from a set of checkboxes and loads a DIV passing those values.

Currently I show a “loading” .gif before the load of the DIV. However, it has time fixed.

I would like to set the time of this GIF until the DIV has loaded its contents completely, so the user knows that data is loading in case sometimes is slower than others.

Any idea?

Thanks!

$(function() {
    $("input[type='checkbox']").on('change', function() {
        var colors = [];
        $("input[type='checkbox']:checked").each(function() {
            colors.push(this.value);
        });
        if (colors.length) {
            $(".loadingItems").fadeIn(300);
            $(".indexMain").load('indexMain.php?color=' + colors.join("+"), function() {
                $(".indexMain").fadeIn(slow);
            });
            $(".loadingItems").fadeOut(300);
        } else {
            $(".loadingItems").fadeIn(300);
            $(".indexMain").load('indexMain.php', function() {
                $(".loadingItems").fadeOut(300);
            });
        }
    });
});

Answer 1

As suggested by @Fabricio Matte, the solution was to put the first Fade Out inside the load
inside the function launched with the load:

            $(".indexMain").load('indexMain.php?color=' + colors.join("+"), function() {
                $(".indexMain").fadeIn(slow);
$(".loadingItems").fadeOut(300);
            });