原生JS图片轮播首次加载初始化异常、transitionend事件不触发

核心问题根因 #

• 触发transitionend失效的本质是首次加载时代码执行早于资源渲染完成：无缓存的首次访问场景下，脚本运行时所有轮播图的图片还未下载完成，幻灯片元素没有真实的渲染尺寸。
• 此时代码计算得到的slide[index].clientWidth值为0，后续设置的所有translateX位移值都是0，滑动容器没有产生实际的位置偏移。就算给元素加了过渡效果，因为没有真实的位置变化，浏览器不会生成位移动画，自然永远不会触发transitionend事件。
• 手动刷新页面时，所有图片、CSS资源已经被浏览器缓存，元素已经完成真实尺寸的渲染，代码计算得到的宽度是准确值，位移、过渡动画都能正常执行，事件监听也就可以正常响应。
• 按钮点击、键盘类事件首次加载能正常工作，是因为这类事件只需要DOM节点存在就可以绑定，不需要依赖元素尺寸计算、动画执行的结果，和本次问题的触发逻辑无关。

代码中附带的其他逻辑问题 #

• 初始化时机错误：当前代码在脚本加载阶段就直接启动自动轮播、计算宽度值，没有等待页面资源完全加载完成再执行初始化。
• 过渡样式设置不规范：
  • transitionEnd函数中写的slideGroup.style.transition = 'ease-in'属于无效CSS值，浏览器无法识别生效。
  • 每次切换幻灯片时临时给transition属性赋值，没有指定过渡的目标属性，部分场景下会被浏览器合并样式计算流程，直接跳过动画过程。
• 无缝跳转逻辑有漏洞：克隆节点插入后的总幻灯片数量计算错误，索引的边界判断值不符合实际的节点分布。

可落地的修复方案 #

• 把所有初始化逻辑（宽度计算、初始位移设置、自动轮播启动、事件绑定）放到页面load事件的回调中执行，确保所有图片、资源完全加载完成后，再基于元素的真实渲染尺寸完成初始化。
• 提前在CSS中给.slides元素统一配置过渡规则，避免在JS中反复修改transition属性导致的样式异常：

  .slides {
    display: flex;
    transition: transform 1s ease;
  }
  

• 修正transitionEnd中的样式逻辑：需要实现无缝无动画跳转时，直接通过slideGroup.style.transition = 'none'关闭过渡效果，完成位移值修正后，再重新把过渡属性设置回之前定义的规则，不要写入无效的CSS值。
• 修正索引边界判断逻辑：根据实际插入的克隆节点数量，重新计算索引的上下限，避免越界或者逻辑死循环。
• 补充兼容兜底：绑定过渡结束事件时，针对旧版浏览器的厂商前缀做兼容处理，避免因为事件名不匹配导致的监听失效。

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