How to combine masonry and foundation interchange

Question

I am using masonry to layout my images and foundation interchange to load a different sized image depending on screen size. (small, medium, large) My problem is that since the images are loaded through JavaScript using the imagesLoaded plugin does not seem to work. I also tried using setTimeout(), but then masonry did not work at all. So does anyone know a way to check if images are done loading through javascript or to make sure that masonry is the absolute last script to run?

example masonry item that I am using

<li class="image masonry-item"><a href="image/url"><img data-interchange="[ {{small/thumb}}, (small)], [ {{medium/thumb}}, (default)], [ {{large/thumb}}, (large)]" ></a></li>

scripts at bottom of page

    <script src="jquery.js"></script> 
    <script src="foundation.min.js"></script>
     <script src="foundation.interchange.js"></script>
    <script src="imagesloaded.pkgd.min.js"></script>
    <script src="masonry.pkgd.js"></script>
    <script> $(document).foundation(); </script>

<script>   
var container = document.querySelector('#container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {


msnry = new Masonry( container, {

            columnWidth :  container.querySelector('.masonry-size'),
            itemSelector:'.masonry-item'} );

}); 
</script>

Answer 1

I'd like to correct my answer above with a more straight-forward approach. I used the Interchange events to trigger a callback function that inits the Masonry grid. This works well and has given me no problems.

Here is the event as listed in the docs:

$(document).on('replace', 'img', function (e, new_path, original_path) {console.log(e.currentTarget, new_path, original_path);});

So just create a function to init the masonry grid, and call it from within the code above.

Answer 2

You can use Interchange to load partials into your page. So, for small screen, load a partial with small images, plus the masonry, and its supporting code. That way, your images won't be loaded via js, and imagesloaded should be able to see them.

In your page:

<div data-interchange="[../small-image-gallery.html, (small)], [large-image-gallery.html, (large)]"></div>

The Partial (not exact code):

<img class="masonry-item" src="some-image-[small, large].jpg">
<img class="masonry-item" src="some-image-[small, large].jpg">
<img class="masonry-item" src="some-image-[small, large].jpg">
<img class="masonry-item" src="some-image-[small, large].jpg">

<script src="imagesloaded.js"></script>
<script src="masonry.js"></script>

Etc.