Question

Using this to activate a loading spinner.

Fails (div loading gif won’t hide) as soon as I remove the alert:

$('#filters a').click(function() {
    var selector = $(this).attr('data-filter');
    $("#filtersLoad").show(); //  Show loading gif in div
    $container.isotope({
        filter: selector
    });
    alert("foo");
    if ($container.data('isotope').$filteredAtoms.length) {
        $("#filtersLoad").hide(); // Hide same div when filter and layout completes.
    }
    return false;
});

Something rather dumb I’m sure! Also open to other approaches.

Thanks for your help!

HTML for Loader:

$("#filtersLoad, #postLoad").html('<img style=\"float:left; border:none;\" src=\"../../themes/images/ajax-loader2.gif\" width=\"54\" height=\"55\">');
});

Latest Revision This works but not pretty. Josh’s code gave me a good start but I needed something that would stop the loader if the same button was clicked sequentially (see the comments below).

$('#filters a').click(function() {
    var selector = $(this).attr('data-filter');
    var lastClicked = $("#filtersLoad2").text();


if(lastClicked == selector) {

   return false;    

} 

   $container.isotope({
        filter: selector,
        onLayout: $("#filtersLoad").show() //  Show loading gif in div
    }, function(){
        $("#filtersLoad").hide();
        $("#filtersLoad2").text(selector);
    });

    return false;
});

I put the lastClickedvalue in a div since I needed it here plus may have use for it later too. And, now using Isotope’s onLayout to show the loading div.

Answer 1

According to the Isotope website, you can specify a callback function as a 2nd parameter, which will fire after the animation has finished. You’ll want to hide your loading image in this callback. Check it:

var currentFilter = '';

$('#filters a').click(function() {
    var selector = $(this).attr('data-filter');

    if (selector === currentFilter){
        return false;
    }
    currentFilter = selector;

    $("#filtersLoad").show(); //  Show loading gif in div
    $container.isotope({
        filter: selector
    }, function(){
        $("#filtersLoad").hide();
    });

    return false;
});