LazyLoad with Masonry+ImagesLoaded

Question

How can I implement LazyLoad to my masonry+ImagesLoaded layout? I have a code

HTML

<div class="masonry">
  <div class="masonry-sizer"></div>
    <div class="masonry-item">
        <img class="masonry-content" src="image1.png">
    </div>
</div>

JS

var $masonry = $('.masonry').masonry({
  itemSelector: '.masonry-item',
  percentPosition: true,
  masonry: {
    columnWidth: '.masonry-sizer'
  }
});
$masonry.imagesLoaded().progress( function() {
  $masonry.masonry('layout');
});

And I cant to get it working with any LazyLoad plugin. The problem is it have to be implemented with imagesLoaded, because I don't have a specific image dimensions. All solutions that I've found simply doesn't work

Answer 1

I've made this using LazySizes plugin, no imagesLoaded though, but it works as it should now

HTML

<div class="masonry">
  <div class="masonry-sizer"></div>
    <div class="masonry-item">
        <img class="masonry-content lazyload" src="low_quality_image1.png" data-src="image1.png">
    </div>
</div>

JS

$('.masonry').each(function(){
  var $module = $(this);
  var update = function(){
    $module.masonry('layout');
  };

  this.addEventListener('load', update, true);

  $module.masonry();
});