locomotive.js smooth scroll update() on load

Question

I'm using locomotive.js (https://locomotivemtl.github.io/locomotive-scroll/) on a wordpress site. It worked perfectly until I uploaded to a live server. On the live server the elements sometimes bump into each other and then flicker and disappear and the footer is also cut off.

I think it must something to do with the page not loading and I need to use update() to check whether the page is loaded. But I'm not sure how to change this to check for page load rather than timeout - can anyone help?

function smooth() {
 let scrollContainer = document.querySelector('your-selector');
scroll = new LocomotiveScroll({
el: scrollContainer,
smooth: true    });

setTimeout(() => {
   scroll.update();
}, 500); 
}

Answer 1

we have to detect images and large assets to load You should use imageLoaded to detect all image loading and after then you have to update the scroll and it should work fine

  const imagesLoaded = require("imagesloaded"); // import the library or can use cdn


  let scrollContainer = document.querySelector("[data-scroll-container]");

  var scroll;

  scroll = new LocomotiveScroll({
    el: scrollContainer,
    smooth: true,
    getSpeed: true,
    getDirection: true,
    offset:["15%",0]
  });




  /* update scroll (height) when all images are loaded */

  imagesLoaded(scrollContainer, { background: true }, function () {
    scroll.update();
  });