机车滚动元素在实时服务器上崩溃并消失答案

【问题标题】：Locomotive scroll elements crashing and disappearing on live server机车滚动元素在实时服务器上崩溃并消失
【发布时间】：2021-04-30 10:13:57
【问题描述】：

我使用机车滚动创建了一个网站，该网站运行良好，直到我上传到实时服务器。在实时服务器上，元素有时会相互碰撞，然后闪烁并消失，并且页脚也被切断。似乎元素的位置没有正确更新，因此在滚动时它们会出现此故障。

我认为这一定是负载问题，因为有时它很好，如果我调整浏览器的大小有时会修复它。加载元素后，我可能需要在滚动条上执行 update()。

我希望调整以下代码，以便检查页面 DOM 是否已加载，但我不确定如何将其从超时更改为检查页面加载。

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

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

【问题讨论】：

您尝试过什么检查为什么会发生这种情况？通常，在不同服务器上的相同标记上运行相同的脚本没有区别
您好，感谢您的回复，看来服务器确实有所作为。我想我设法通过更新页面加载来解决它 - 任何需要它的人都可以试试这个。 window.onload = function() { scroll.update() };

标签： javascript locomotive-scroll

【解决方案1】：

[>我们必须检测要加载的图像和大型资产您应该使用

imageLoaded 检测所有图像加载，然后您必须更新滚动，它应该可以正常工作

 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();
  });][1]

【讨论】：