应使用 requestanimationframe 替代 settimeout 实现平滑动画，配合预加载图片（new image() + onload）、避免复用实例、用 opacity/visibility 控制切换，并通过 picture 或服务端适配 webp 等格式。
用 requestAnimationFrame 替代 setTimeout 做平滑动画
直接改 img.src 配合 setTimeout 看似简单，但容易卡顿、掉帧，尤其在低端设备或后台标签页里。浏览器对 requestAnimationFrame 有优化，能自动对齐屏幕刷新率，且在页面不可见时会暂停调用——这是它比轮询更靠谱的根本原因。
- 别用
setInterval或高频setTimeout（比如setTimeout(..., 16)），它们不保证执行时机，还可能堆积回调 - 每次动画帧只做一件事：计算下一帧该显示哪张图，然后赋值给
img.src，不要在里面加 DOM 操作或网络请求 - 如果图片已缓存，切换几乎无延迟；若未缓存，
img.src赋值后需监听onload才能确保渲染，否则可能闪白或跳帧
预加载图片避免动画中断
动态切换时突然卡住一两帧？大概率是下一张图还没加载完。img.src 赋值那一刻才开始请求，而动画已经跑起来了。必须提前把所有图片实例创建好并触发加载。
- 用
new Image()创建图片对象，立刻赋值.src，不用插入 DOM - 等所有
onload触发后再启动动画循环，否则第一轮就可能 fallback 到空白 - 注意：不要复用同一个
Image实例反复改src，部分浏览器会中止前一个请求；每个地址配一个独立实例更稳
示例关键片段：
const frames = ['a.png', 'b.png', 'c.png'].map(src => {
const img = new Image();
img.src = src;
return img;
});
Promise.all(frames.map(img => new Promise(r => img.onload = r))).then(startAnimation);
用 CSS opacity 或 visibility 避免重排重绘
如果动效需要淡入淡出、叠加切换，直接换 img.src 会导致硬切。此时不该靠 JS 搞多个 img 标签来回 show/hide——那样触发 layout，性能差。
传媒公司模板(RTCMS)1.0
下载
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
- 用两个
<img alt="html中如何用js做动态动画图片" >标签叠在一起，靠opacity和transition做交叉淡化，JS 只控制 class 切换 - 确保父容器设了
position: relative，子图设position: absolute+top: 0; left: 0 - 慎用
display: none切换，它会触发重排；visibility: hidden更轻量，但依然占布局空间
处理 WebP/AVIF 等现代格式的兼容性 fallback
想用更小体积的 .webp 做动画？别直接写死后缀。用户浏览器不支持时，img 会挂掉，动画就停在半路。
立即学习“前端免费学习笔记（深入）”；
- 用
picture+source是标准解法，但注意：JS 动态切换时，不能只改img.src，得同步更新picture内的source[srcset] - 更简单的方案：服务端根据
Accept请求头返回对应格式，前端统一用.png后缀，实际响应可能是 WebP - 本地开发时，Chrome 可能缓存失败的 WebP 请求，导致后续一直 fallback，清空缓存或用无痕模式验证
真正麻烦的不是怎么播，而是怎么让每一张图都在该出现的时候「已经躺在内存里」——预加载漏一张，动画就露馅一次。
