Image gallery with Isotope (with ImagesLoaded) and Lazysize : someone spots my problem?

Support Themes & Styling
1

I need to build a rather large image-gallery with masonry layout and filtering, so Isotope for that. Because of the number of images, I need some lazy-loading. And I need this responsive from watch to mobile to tablet to desktop. Lazysize does this. I am not sure I actually need ImagesLoaded, it’s there because I keep searching what might help.

I plan to later on add the srcset and sizes as they come from Grav for speed, but that’s not my main issue for the moment. I also need a lightbox, but again, this has no priority.

Following whatever I can find on the net, I came up with the following page template, but things won’t cooperate. Individually yes, but not together. I am at wits end, and I post this in the hope someone sees where I deviate.

Thanks for reading !

{% extends 'partials/base.html.twig' %}

{% do assets.addJs('theme://js/lazysizes.min.js') %}
{% do assets.addJs('https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js') %}
{% do assets.addJs('https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js') %}
{% do assets.addJs('theme://js/home-grid.js') %}
{% do assets.addCss('theme://css/home-grid.css') %}

{# Links + Docs

https://isotope.metafizzy.co/
https://imagesloaded.desandro.com/
https://github.com/aFarkas/lazysizes

https://github.com/aFarkas/lazysizes#user-content-specify-dimensions

Learn
https://ericportis.com/posts/2014/srcset-sizes/

Code
https://codepen.io/anon/pen/vOeyQL

#}

{% block content %}
<div class="main-content">
    <div class="container">
        {{ page.content|raw }}
        <div class="grid">
            <div class="grid-sizer"></div>
            {% for img in page.media.images %}
            <div class="grid-item" style="padding-bottom: {{ (img.height / img.width * 100)|round(2, 'floor') }}%;">
                <img data-src="{{ img.url }}"
                     alt=""
                     class="lazyload" />
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

jQuery(document).ready(function ($) {

  var $grid = $('.grid').isotope({
    itemSelector: '.grid-item',
    percentPosition: true,
    masonry: {
      // use element for option
      columnWidth: '.grid-sizer'
    }
  })

  // // layout Isotope after each image loads
  // $grid.imagesLoaded().progress( function() {
  //   $grid.isotope('layout');
  // });

});

/* fluid 5 columns */
.grid-sizer,
.grid-item {
    width: 20%;
}

.grid-item {
    float: left;
    padding: 0;
    border: 2px solid #ffffff;
    height: 0;
    /* padding-bottom is calculated and rendered in to HTML OR inserted on css class*/
}

.grid-item img {
    display: block;
    width: 100%;
}

/* clear fix
.grid:after {
    content: '';
    display: block;
    clear: both;
} */

/* fade image in after load */
.lazyload,
.lazyloading {
    opacity: 0;
}

.lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
}