Tiny slider首次切换图片卡顿两次后续运行流畅问题排查

• 初始轮播项显隐状态错误：CSS未配置非首屏轮播项默认隐藏，页面加载完成后所有<a>标签包裹的图片处于重叠显示状态，首次切换时多图同时执行显隐动画出现视觉抖动。
• 图片资源未预加载：你使用的是第三方外链图片，页面首次加载时仅会下载第一张可视区域的图片，触发首次切换时浏览器需要同时下载后续图片+执行过渡动画，资源抢占导致卡顿。
• 动画执行时序错误：jQuery的fadeOut、fadeIn均为异步动画，当前代码没有等待动画执行完成就将首元素移动到列表末尾，动画执行和DOM移动操作叠加放大了首次卡顿的问题。
• 无动画防重机制：首次加载时图片下载会阻塞动画执行，3秒定时器触发时上一次动画可能还未执行完成，出现动画叠加的问题。

修改后CSS代码 #

img {
  max-width: 100%;
}

#slider:after {
  content: "";
  display: table;
  clear: both;
}

#slider img {
  float: left;
  margin: 0 -100% 0 0;
}

#slider {
  width: 200px;
  background-color: red;
}
/* 新增：初始隐藏非第一个轮播项 */
#slider a:not(:first-of-type) {
  display: none;
}

修改后JS代码 #

$(function() {
  const wrapper = $('#slider');
  let isAnimating = false; // 动画锁，防止重复触发

  // 新增：预加载所有轮播图片
  const imgs = wrapper.find('img');
  imgs.each(function() {
    const img = new Image();
    img.src = $(this).attr('src');
  });

  setInterval(function() {
    if (isAnimating) return; // 动画执行中直接跳过
    isAnimating = true;
    const firstChild = wrapper.children().first();
    firstChild
      .fadeOut(1000)
      .next('a')
      .fadeIn(1000, function() {
        // 动画执行完成后再移动DOM，重置动画锁
        firstChild.appendTo(wrapper);
        isAnimating = false;
      });
  }, 3000);
});

HTML代码无需修改。

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