基于滚动的图像序列动画更流畅

Question

我想要一个带有如下图像序列的基于滚动的动画：

https://www.wayoutintl.com/

当访问上面的链接时，当我们向下滚动时，请参阅第 3 节，海滩图像从白天移动到夜晚。此动画似乎滚动流畅。我的动画在本地平滑滚动，当我将相同的代码放在服务器上时，序列图像在滚动时断断续续。滚动不顺畅。那我现在该怎么办？请帮助我.....提前谢谢....下面是我的代码....

// define images
            var images = [
                "imgs/0001/0001-compress2.jpg",
                "imgs/0001/0002-compress2.jpg",
                "imgs/0001/0003-compress2.jpg",
                "imgs/0001/0004-compress2.jpg",
                "imgs/0001/0005-compress2.jpg",
                "imgs/0001/0006-compress2.jpg",
                "imgs/0001/0007-compress2.jpg",
                "imgs/0001/0008-compress2.jpg",
               "imgs/0001/0009-compress2.jpg",
               "imgs/0001/0010-compress2.jpg",
               "imgs/0001/0011-compress2.jpg",
               "imgs/0001/0012-compress2.jpg",
               "imgs/0001/0013-compress2.jpg",
               "imgs/0001/0014-compress2.jpg",
               "imgs/0001/0015-compress2.jpg",
               "imgs/0001/0016-compress2.jpg",
               "imgs/0001/0017-compress2.jpg",
               "imgs/0001/0018-compress2.jpg",
               "imgs/0001/0019-compress2.jpg",
               "imgs/0001/0020-compress2.jpg",
               "imgs/0001/0021-compress2.jpg",
               "imgs/0001/0022-compress2.jpg",
               "imgs/0001/0023-compress2.jpg",
               "imgs/0001/0024-compress2.jpg",
               "imgs/0001/0025-compress2.jpg",
               "imgs/0001/0026-compress2.jpg",
               "imgs/0001/0027-compress3.jpg",
               "imgs/0001/0028-compress3.jpg",
               "imgs/0001/0029-compress3.jpg",
               "imgs/0001/0030-compress3.jpg",
               "imgs/0001/0031-compress3.jpg",
               "imgs/0001/0032-compress3.jpg",
               "imgs/0001/0033-compress3.jpg",
               "imgs/0001/0034-compress3.jpg",
               "imgs/0001/0035-compress3.jpg",
               "imgs/0001/0036-compress3.jpg",
               "imgs/0001/0037-compress3.jpg",
               "imgs/0001/0038-compress3.jpg",
               "imgs/0001/0039-compress3.jpg",
               "imgs/0001/0040-compress3.jpg",
               "imgs/0001/0041-compress3.jpg",
               "imgs/0001/0042-compress3.jpg",
               "imgs/0001/0043-compress3.jpg",
               "imgs/0001/0044-compress3.jpg",
               "imgs/0001/0045-compress3.jpg",
               "imgs/0001/0046-compress3.jpg",
               "imgs/0001/0047-compress3.jpg",
               "imgs/0001/0048-compress3.jpg",
               "imgs/0001/0049-compress3.jpg",
               "imgs/0001/0050-compress3.jpg",
               "imgs/0001/0051-compress3.jpg",
               "imgs/0001/0052-compress3.jpg",
               "imgs/0001/0053-compress3.jpg",
               "imgs/0001/0054-compress3.jpg",
               "imgs/0001/0055-compress3.jpg",
               "imgs/0001/0056-compress3.jpg",
               "imgs/0001/0057-compress3.jpg",
               "imgs/0001/0058-compress3.jpg",
               "imgs/0001/0059-compress3.jpg",
               "imgs/0001/0060-compress3.jpg",
               "imgs/0001/0061-compress3.jpg",
               "imgs/0001/0062-compress3.jpg",
               "imgs/0001/0063-compress3.jpg",
               "imgs/0001/0064-compress3.jpg",
               "imgs/0001/0065-compress3.jpg",
               "imgs/0001/0066-compress3.jpg",
               "imgs/0001/0067-compress3.jpg",
               "imgs/0001/0068-compress3.jpg",
               "imgs/0001/0069-compress2.jpg",
               "imgs/0001/0070-compress3.jpg",
               "imgs/0001/0071-compress3.jpg",
               "imgs/0001/0072-compress2.jpg",
               "imgs/0001/0073-compress3.jpg",
               "imgs/0001/0074-compress3.jpg",
               "imgs/0001/0075-compress3.jpg",
               "imgs/0001/0076-compress2.jpg",
               "imgs/0001/0077-compress2.jpg",
               "imgs/0001/0078-compress2.jpg",
               "imgs/0001/0079-compress3.jpg",
               "imgs/0001/0080-compress3.jpg"

            ];

            // TweenMax can tween any property of any object. We use this object to cycle through the array
            var obj = {curImg: 0};

            // create tween
            var tween = TweenMax.to(obj, 0.5,
              {
                curImg: images.length - 1,  // animate propery curImg to number of images
                roundProps: "curImg",       // only integers so it can be used as an array index
                repeat: 0,                 // repeat 3 times
                immediateRender: true,      // load first image automatically
                ease: Linear.easeNone,      // show every image the same amount of time
                onUpdate: function () {
                  $("#myimg").attr("src", images[obj.curImg]); // set the image source
                }
              }
            );

            // init controller
            var controller = new ScrollMagic.Controller();

            // build scene
            var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 800})
                    .setTween(tween)
                    .addTo(controller);

<div class="image-seq">
    <section class="demo">
    <div class="spacer s0" id="trigger"></div>
    <div id="imagesequence">
      <img id="myimg" class="lazy"/><br>    
    </div>
  </section>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script type="text/javascript" src="js/as.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.7/jquery.lazyload.js"></script>

</body>

Answer 1

当您滚动时，您将要在下一个 requestAnimationFrame 上加载的图像（可能很多）排队，这就是为什么它在本地可以正常工作，但在服务器上却不行。
有些图像相当大（体育场的每个大约 150kB，你似乎有超过 300 个）。总页面大小约为 65MB。

要尝试的事情：
在初始化滚动条之前预加载图像。
减少图像的数量，可能还有它们的大小。 尝试使用 webP 图像来减小它们的大小。
使用 vanilla JS 来设置图像源而不是 jQuery。
使用浏览器开发工具（网络和性能选项卡）检查瓶颈所在。将限制设置为 3g 可能会有所帮助，这样您就可以在本地版本上测试性能。