Using masonry with imagesloaded

Question

I\'m a js newbie and hope this questions doesn\'t seem too stupid.

I\'m using masonry for my site - works fine. I wanted to let my boxes appear just when masonry fin

Answer 1

Install

npm install masonry-layout --save

npm install imagesloaded --save

Then vanilla js options would be

'use strict'

const Masonry = require('masonry-layout')
const imgloaded = require('imagesloaded')
const elem = document.querySelector('.grid')
var imgLoad = imgloaded( elem )
    function onAlways() {
        const msnry = new Masonry( elem, {
            // options
            columnWidth: '.grid-sizer',
            // do not use .grid-sizer in layout
            itemSelector: '.grid-item',
            percentPosition: true,
            gutter: 10
        })
    // console.log('all images are loaded')
}
if (elem) {
    // bind with .on()
    imgLoad.on( 'always', onAlways )
    // unbind with .off()
    // imgLoad.off( 'always', onAlways )
}

Then check the console for all images are loaded.