Javascript 基于滚动的图像序列动画更平滑

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

当访问上述链接时，请参阅第3节，当我们向下滚动时，海滩图像会从白天移动到夜晚。这个动画看起来很流畅。我的动画在本地流畅地滚动，当我把相同的代码放在服务器上时，序列图像在滚动中起伏。在卷轴上工作不平稳。那我现在该怎么办？请帮帮我。。。。。提前谢谢。。。。下面是我的代码

//定义图像 变量图像=[ imgs/0001/0001-Compresss2.jpg， imgs/0001/0002-compresss2.jpg， imgs/0001/0003-compresss2.jpg， imgs/0001/0004-compresss2.jpg， imgs/0001/0005-compresss2.jpg， imgs/0001/0006-Compresss2.jpg， imgs/0001/0007-compresss2.jpg， imgs/0001/0008-compresss2.jpg， imgs/0001/0009-Compresss2.jpg， imgs/0001/0010-Compresss2.jpg， imgs/0001/0011-Compresss2.jpg， imgs/0001/0012-Compresss2.jpg， imgs/0001/0013-Compresss2.jpg， imgs/0001/0014-Compresss2.jpg， imgs/0001/0015-Compresss2.jpg， imgs/0001/0016-Compresss2.jpg， imgs/0001/0017-Compresss2.jpg， imgs/0001/0018-Compresss2.jpg， imgs/0001/0019-Compresss2.jpg， imgs/0001/0020-Compresss2.jpg， imgs/0001/0021-Compresss2.jpg， imgs/0001/0022-compresss2.jpg， imgs/0001/0023-Compresss2.jpg， imgs/0001/0024-Compresss2.jpg， imgs/0001/0025-compresss2.jpg， imgs/0001/0026-Compresss2.jpg， imgs/0001/0027-compresss 3.jpg， imgs/0001/0028-compresss 3.jpg， imgs/0001/0029-compresss 3.jpg， imgs/0001/0030-Compresss 3.jpg， imgs/0001/0031-Compresss3.jpg， imgs/0001/0032-Compresss3.jpg， imgs/0001/0033-Compresss3.jpg， imgs/0001/0034-Compresss 3.jpg， imgs/0001/0035-Compresss 3.jpg， imgs/0001/0036-Compresss 3.jpg， imgs/0001/0037-Compresss 3.jpg， imgs/0001/0038-Compresss 3.jpg， imgs/0001/0039-Compresss 3.jpg， imgs/0001/0040-Compresss 3.jpg， imgs/0001/0041-Compresss 3.jpg， imgs/0001/0042-Compresss 3.jpg， imgs/0001/0043-compresss 3.jpg， imgs/0001/0044-Compresss 3.jpg， imgs/0001/0045-Compresss 3.jpg， imgs/0001/0046-Compresss 3.jpg， imgs/0001/0047-Compresss 3.jpg， imgs/0001/0048-Compresss 3.jpg， imgs/0001/0049-Compresss 3.jpg， imgs/0001/0050-Compresss 3.jpg， imgs/0001/0051-Compresss 3.jpg， imgs/0001/0052-Compresss 3.jpg， imgs/0001/0053-compresss 3.jpg， imgs/0001/0054-Compresss 3.jpg， imgs/0001/0055-Compresss 3.jpg， imgs/0001/0056-Compresss 3.jpg， imgs/0001/0057-Compresss 3.jpg， imgs/0001/0058-Compresss 3.jpg， imgs/0001/0059-Compresss 3.jpg， imgs/0001/0060-compresss 3.jpg， imgs/0001/0061-Compresss3.jpg， imgs/0001/0062-Compresss3.jpg， imgs/0001/0063-compresss3.jpg， imgs/0001/0064-compresss 3.jpg， imgs/0001/0065-compresss 3.jpg， imgs/0001/0066-Compresss3.jpg， imgs/0001/0067-Compresss 3.jpg， imgs/0001/0068-compresss 3.jpg， imgs/0001/0069-Compresss2.jpg， imgs/0001/0070-Compresss 3.jpg， imgs/0001/0071-Compresss 3.jpg， imgs/0001/0072-Compresss2.jpg， imgs/0001/0073-compresss 3.jpg， imgs/0001/0074-Compresss 3.jpg， imgs/0001/0075-Compresss 3.jpg， imgs/0001/0076-Compresss2.jpg， imgs/0001/0077-Compresss2.jpg， imgs/0001/0078-Compresss2.jpg， imgs/0001/0079-Compresss 3.jpg， imgs/0001/0080-Compresss 3.jpg ]; //TweenMax可以连接任何对象的任何属性。我们使用这个对象在数组中循环 var obj={curImg:0}； //制造吐温 var tween=TweenMax.toobj，0.5， { curImg:images.length-1，//将属性curImg设置为图像数 roundProps:curImg，//仅限整数，因此可以将其用作数组索引 重复：0，//重复3次 Immediater:true，//自动加载第一个图像 ease:Linear.easeNone，//以相同的时间显示每个图像 onUpdate：函数{ $myimg.attrsrc，images[obj.curImg]；//设置图像源 } } ; //初始化控制器 var controller=新的ScrollMagic.controller； //构建场景 var scene=new ScrollMagic.scene{triggerement:trigger，持续时间：800} .Settweenween .添加到控制器；

---

当您滚动时，您正在排队等待在下一个requestAnimationFrame上加载的图像，这就是为什么它在本地正常工作，但在服务器上不正常。 有些图片相当大，体育场的每张大约150kB，你似乎有300多张。总页面大小约为65MB

尝试的事项： 在初始化滚动程序之前预加载图像。 减少图像的数量，可能减小图像的大小。 尝试使用webP图像缩小其大小。 使用vanilla JS来设置图像源，而不是jQuery。

---

使用浏览器“开发工具”“网络”和“性能”选项卡检查瓶颈所在的位置。将限制设置为3g可能会有所帮助，这样您就可以在本地版本上测试性能。

为什么要使用ScrollMagic？好得多，就这么说吧。而且比你们现在使用的GSAP1要好得多。还有。这个问题的解决方案是什么？你能通知我吗？