文本轮播组件清理缓存后首次加载短时间展示全部内容如何解决？

这个问题本质是无样式内容闪烁（FOUC），站点的缓存插件延迟了JS资源加载/执行时机，导致轮播组件初始化完成前，所有轮播项已经被浏览器渲染出来，你可以按优先级尝试以下方案：

方案1：用CSS默认隐藏非首个轮播项（优先选择，无依赖不依赖JS执行时机） #

给轮播容器添加默认样式，初始只展示第一个轮播项，后续轮播组件启动后会自己接管显隐逻辑：

/* 初始仅展示第一个轮播子项 */
.rotate > *:not(:first-child) {
  display: none;
}
/* 可加降级逻辑，JS禁用时展示全部内容避免内容丢失 */
.no-js .rotate > * {
  display: block;
}

如果需要降级逻辑，在页面<html>标签上加no-js类，然后在所有JS代码最前侧加一行代码移除该类：

document.documentElement.classList.remove('no-js')

方案2：调整轮播初始化脚本的加载优先级 #

你当前的初始化代码$(".rotate").rotator();如果满足以下任一情况都会导致执行延迟：

• 被包裹在$(document).ready()、window.onload回调中
• 被缓存插件设置为延迟加载、异步加载
• 放在页面底部，等所有DOM解析完成才执行

优化方法：

1. 保证jQuery在页面头部加载（不要做延迟异步处理）
2. 把轮播初始化脚本直接内联写到轮播HTML元素的紧后方，不需要加任何DOM加载完成的监听，只要轮播DOM渲染完成立刻执行初始化，无需等待其他资源加载。

为什么测试用例无法复现问题？ #

JSFiddle运行环境中JS资源默认会提前加载完成，不存在站点上的缓存延迟、大量其他资源阻塞JS执行的情况，轮播组件初始化速度远快于DOM渲染，因此不会出现全量内容短暂显示的问题。

内容的提问来源于stack exchange，提问作者EdgarAlexPoe