Trigger Masonry after each image load in WordPress

Question

I have Masonry working in WordPress for a page I'm creating that has about 20 images that load and then Masonry is triggered. Looks perfect, apart from when there is a slow connection speed, it loads all 20+ pictures up and only then grids them. Ideally I want masonry to trigger after each picture, like a wall is being built. I'm sure it can be done, but I can't get it to work.

The code I have used so far is below for the masonry to run is:

  var container = document.querySelector('#ms-container');
  var msnry = new Masonry( container, {
    itemSelector: '.ms-item',
    columnWidth: '.ms-item',
  });

then, I've been trying the following to get it to load after each image but it's not working,

  imagesLoaded().progress( container, function() {
     msnry = new Masonry( container, {
        itemSelector: '.ms-item',

     });
  });

I'm sure it's possible, can somebody help?

Kld Kld · Accepted Answer · 2016-07-02T20:00:35

You can execute your code when the page is fully loaded including images by using $( window ).load().

$( window ).load(function() {

  var container = document.querySelector('#ms-container');
  var msnry = new Masonry( container, {
    itemSelector: '.ms-item',
    columnWidth: '.ms-item',
  });
});

EDIT

To fire an event after loading every image

$('img').on('load', function(){
   var container = document.querySelector('#ms-container');
   var msnry = new Masonry( container, {
    itemSelector: '.ms-item',
    columnWidth: '.ms-item',
  });
});

Trigger Masonry after each image load in WordPress

1 Answers