Lazy load plugin with Locomotive

[mathieupreaud]

Hi,

I'm trying to implement the lazy loading image plugin blazy.js. I'm struggling to find the way to make it work with Locomotive Scroll.

Here is the HTML:

<img data-src="my-image.jpg" class="b-lazy" width="100%" height="auto" data-scroll data-scroll-class="imgLoad" data-scroll-call="lazy" />

The JS:

const scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      smooth: true,
});

var bLazy = new Blazy();

const img = document.getElementsByTagName("img");
scroll.on('scroll', () => {
      if(img.classList.contains("imgLoad")) {
          // Do something
      } else {
          // Do nothing
      }
});

I'm not really sure how to combine Locomotive with the lazy plugin. Also I'm don't know if I should use scroll.on('scroll' () or scroll.on('call' () to trigger the blazy function.

Thanks for the help!

[limedon]

try vanilla-lazyload.js with the specified container option, this work for me. var lazyLoadInstance = new LazyLoad({ container: document.getElementById("js-scroll") });

[Dushyant1295]

Lazy Load ( vanilla-lazyload.js ) With Locomotive Scroll

// JS

function lazy_load() {
  const lazyLoadInstance = new LazyLoad({
    elements_selector: ".lazy",
    thresholds: "100% 800px"
  });
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      But   when we use lazy load we have to recalculate the height  on each
      lazyload img it cause some  flicker   to avoid that
     use following css to calculate height vie css
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.lazy-wrapper {
    position: relative;
    height: 0;
    padding-bottom: 50%;
    /* 👆 image height / width * 100% */

    img{
        width: 100%;
        height: auto;
        position: absolute;
    }
}



/*    HTML   */


<div class="container">
    <div class="lazy-wrapper">
        <img class="lazy" data-src="img/3.jpg" />
    </div>
</div>

``

[umairqazi523]

@Dushyant1295
In my case, I have large images and they are regardless of any ratio like screenshots of web pages.

const intLazyLoad = new LazyLoad({
    elements_selector: ".lazy",
    container: document.getElementById("site-main"),
    callback_enter: locoScrollUpdate
});

const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".site-main"),
    smooth: true,
    lerp: 0.12,
    tablet: {
        smooth: true
    },
    smartphone: {
        smooth: true
    }
});

function locoScrollUpdate() {
    setTimeout(() => {
        locoScroll.update();
    }, 100);
}

It will refresh the locomotive scroll instance on every image load.