Question

Isotope can take a while to return stuff when asked to filter.

So, I’d like to use a loading.gif while that’s happening. I suspect some jQuery would do the trick but don’t know where or what it should look like to do that.

The Isotope is straightforward:

var $container = $('#stream');

$container.imagesLoaded( function(){
  $container.isotope({
 itemSelector: '.stream-class',
 transformsEnabled: false,
  });  
});

Then, I use simple buttons like those in the docs to trigger the filter:

$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ filter: selector });
  return false;
});

Thanks in advance for the help!

Answer 1

This works for me:

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


if(lastClicked == selector) {

   return false;    

} 

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

    return false;
});

Hope this helps someone else.