desandro / masonry

:love_hotel: Cascading grid layout plugin
https://masonry.desandro.com
16.27k stars 2.11k forks source link

Issue with Lazy Load and grid. #1185

Open skigo opened 1 year ago

skigo commented 1 year ago

Hello, i am facing an issue with the lazy load on the masonry grid, i read a lot of articles but there is no working solution.

I have the following url https://www.skigoweddingstories.com/galleries/a-c-island-athens-riviera/

the website has locomotive with scroll trigger + the masonry grid with vanilla lazy load.

I use this code for the masonry grid

` if ($(".wedding-grid").length > 0) { const lazyLoadInstance = new LazyLoad({ callback_loaded: () => { if (typeof gridWedd !== "undefined" && gridWedd !== null) { this.$masonryWedd = new Masonry(gridWedd, { itemSelector: ".s-weddinggalleryitem", columnWidth: ".grid-sizer", percentPosition: true, }); } }, });

  imagesLoaded(
    document.querySelector(".wedding-grid"),
    function (instance) {
      lazyLoadInstance.update();
    }
  );`

and i tried many options for the threshold but non of them is working, some times the masonry is not initalizing at all.

Any advice?