Handle imagesLoaded using vanilla JS

[thewebartisan7]

All solutions that I can find and that works seem using only jQuery.

But I am trying to solve this issue using vanilla JS.

I am using infinitescroll + masonry and according to docs imagesLoaded is part of bundle and should already works when using option outlayer but seem not works.

Here is an example:

https://jsfiddle.net/tq134rwb/3/

Initially images are overlapping each one and when you resize window you can see images are correctly ordered.

I try several things from jQuery solution but didn't works.

Thanks in advance for any suggestions.

[thewebartisan7]

NOTE: If images for some reasons are loaded correctly, try just run again the jsfiddle. Can happen that images are cached and loaded quickly. Especially first time you load jsfiddle because there is pre-loading of page.

[thewebartisan7]

I was able to fix this...

    // layout Masonry after each image loads
    imagesLoaded('.grid', function () {
        msnry.layout() // this work
        //msnry.masonry('layout') // This doesn't work
    })

https://jsfiddle.net/8kmz9gbc/