Isotope executing before Images load

Question

I'm struggling to get my Isotope to execute after images load because otherwise, the Isotope items overlap. - I am trying to apply the ImagesLoaded plugin (http://imagesloaded.desandro.com/) to my Isotope, however, I am struggling to execute the Isotope after Images load.

Below is my Isotope WITHOUT ImagesLoaded, if anyone knows how to go about this I'd be most grateful! (: Here is my Isotope in action: http://illuminategg.hol.es/portfolio.html

    var isotope_port = $('.port-isotope');
isotope_port.isotope({
    'itemSelector': '.item'
});

$('.port-filter a').click(function() {
    $(this).parent().parent().find('li').removeClass('selected');
    $(this).parent().addClass('selected');

    var selector = $(this).attr('data-filter');
    isotope_port.isotope({ filter: selector });
    return false;
});

Answer 1

For imagesloaded, first add the script to your page since it is not part of isotope. Then use it as follows:

var isotope_port = $('.port-isotope'); isotope_port.imagesLoaded( function() { isotope_port.isotope({ 'itemSelector': '.item' }); });