Isotope Plugin: How to use the imagesLoaded option?

Question

I'm using the Isotope plugin for the grid of a Wordpress page. I would like to use Isotope's imagesLoaded option in order to avoid the images on the page overlapping when the page is loaded. Can someone explain to me where and how in my existing code I have to use imagesLoaded?

jQuery(function ($) {

    var $container = $('#isotope-list');        
    $container.isotope({                        
        itemSelector : '.item', 
        layoutMode : 'masonry',
        percentPosition: true
    });


    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });

    return false;
    });

});

UPDATE:

I tried adding imagesLoaded but it causes the Isotope plugin to stop working entirely. Here's the code with imagesLoaded added:

jQuery(function ($) {

    var $container = $('#isotope-list').imagesLoaded( function() {
      $container.isotope({
            itemSelector : '.item', 
            layoutMode : 'masonry',
            percentPosition: true
      });
    });

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });

    return false;
    });

});

I am linking to the imagesLoaded script in the header of the page but I am getting the following error when inspecting the page in Chrome:

Where have you tried adding it so far? You can call it either before or after initialising Isotope, so which did you try that caused you the issues? — FluffyKitten, Aug 22 '17 at 07:18
If you [read the docs](https://isotope.metafizzy.co/layout.html#imagesloaded), you will know how to do it. It even comes with an editiable demo and etc. — Terry, Aug 22 '17 at 07:19
Possible duplicate of [Isotope not working with imagesLoaded?](https://stackoverflow.com/questions/23387010/isotope-not-working-with-imagesloaded) — Terry, Aug 22 '17 at 07:21
Did either of those options in the answer work for you, or do you need more help? — FluffyKitten, Aug 24 '17 at 22:33
@FluffyKitten Definitely need some more help :/ I updated the question to include what I have tried after reading your answer. Thanks! — JoSch, Aug 28 '17 at 08:02

score 2 · Accepted Answer · answered Aug 22 '17 at 07:26

You can postpone initialising Isotope until all of your images have loaded by doing it in the callback function, e.g.:

var $container = $('#isotope-list').imagesLoaded( function() {
  $container.isotope({
        itemSelector : '.item', 
        layoutMode : 'masonry',
        percentPosition: true
  });
});

Or you can initialize Isotope, and then trigger layout after the images load.

// initialise Isotope
var $container = $('#isotope-list');        
$container.isotope({                        
    itemSelector : '.item', 
    layoutMode : 'masonry',
    percentPosition: true
});

// layout Isotope again after all images have loaded
$container.imagesLoaded().progress( function() {
   $container.isotope('layout');
});

Ref: https://isotope.metafizzy.co/faq.html

Thanks for the response. Unfortunately, implementing your first solution causes Isotope to stop working entirely, I don't see why though. I merely added .imagesLoaded to the existing code (as you suggest in your answer) — JoSch, Aug 28 '17 at 07:46
And what happened when you tried the 2nd way? Also, I presume you have included the imageLoaded library, as you said you wanted to use it? — FluffyKitten, Aug 29 '17 at 00:17

score 0 · Answer 2 · answered Aug 28 '17 at 19:55

Without a Link to see the rest of your code I am making an educated guess based on your console log error. The console shows that "imagesLoaded is not a function" indicating that the imagesLoaded.js file is either not loaded as a script or loaded incorrectly. Early versions of isotope contained imagesLoaded but the current version does not (v3), so one needs to load it separately. Make sure that imagesLoaded.js and isotope.js are loaded after jQuery.

Isotope Plugin: How to use the imagesLoaded option?

2 Answers2