javascript - 基于滚动的图像序列动画更流畅
问题描述
我想要一个具有如下图像序列的基于滚动的动画:
当访问上面的链接时,当我们向下滚动时,请参阅第 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>
解决方案
当您滚动时,您正在排队要在下一个 requestAnimationFrame 上加载的图像(可能很多),这就是为什么它在本地工作正常,但在服务器上却不行的原因。
有些图像相当大(体育场的每个大约 150kB,你似乎有超过 300 个)。总页面大小约为 65MB。
要尝试的事情:
在初始化滚动条之前预加载图像。
减少图像的数量,可能还有它们的大小。尝试使用 webP 图像来减小它们的大小。
使用 vanilla JS 来设置图像源而不是 jQuery。
使用浏览器开发工具(网络和性能选项卡)检查瓶颈所在。将限制设置为 3g 可能会有所帮助,这样您就可以在本地版本上测试性能。
推荐阅读
- python - 尝试使用套接字在 Python 中扫描 IP 以获取域名
- ssl - Apache cassandra 加密(不是 dse)
- windows - 如何在将输出重定向到文件时调用的 Windows 批处理文件中输出彩色文本?
- .net - 网格渲染不正确的 WPF ScrollViewer
- javascript - Javascript Fullcalendar
- winforms - 满足条件时,Winform Timer 未运行 if 语句
- sql - SAS/SQL 文本文件读取
- python - 根据每组真实值的数量删除行 - Python
- java - 带有泛型参数的 TypeReference 以反序列化对象列表
- raku - 编写属性特征