实现JavaScript加载环动画每4秒循环，直至页面加载完成

嘿，我来帮你搞定这个加载环循环动画的需求！要实现每4秒执行一次动画、直到页面加载完成，还支持手动停止，咱们可以按以下步骤来：

1. 封装动画逻辑为可复用函数 #

首先把你原来的动画代码封装成一个独立函数，这样方便重复调用。假设你的动画是操作12个.radial元素的样式（比如显示/隐藏、透明度变化等），示例如下：

function runRadialAnimation() {
  // 替换成你实际的动画逻辑
  const radialElements = document.querySelectorAll('.radial');
  
  // 举个例子：给每个.radial元素添加动画类，1秒后移除（模拟一次完整动画）
  radialElements.forEach(el => {
    el.classList.add('radial-animate');
    setTimeout(() => el.classList.remove('radial-animate'), 1000);
  });
}

注：这里的radial-animate是你CSS里定义的动画类，替换成你实际用的类名就行。

2. 实现循环触发+自动停止逻辑 #

接下来咱们用定时器实现每4秒执行一次动画，同时监听页面加载状态，加载完成后自动停止循环，还要支持手动停止：

// 存储定时器ID，方便后续清除
let animationTimer;

// 检查页面加载状态的函数（要提前声明，方便移除监听）
function checkPageLoaded() {
  if (document.readyState === 'complete') {
    stopAnimationLoop();
    console.log('页面已完全加载，动画自动停止');
  }
}

// 启动动画循环的函数
function startAnimationLoop() {
  // 先立即执行一次动画，不用等4秒
  runRadialAnimation();
  
  // 设置每4秒执行一次动画
  animationTimer = setInterval(runRadialAnimation, 4000);
  
  // 立即检查一次页面状态
  checkPageLoaded();
  // 监听页面加载状态变化
  document.addEventListener('readystatechange', checkPageLoaded);
}

// 手动停止动画的函数
function stopAnimationLoop() {
  if (animationTimer) {
    clearInterval(animationTimer);
    animationTimer = null;
    // 移除事件监听，避免内存泄漏
    document.removeEventListener('readystatechange', checkPageLoaded);
    console.log('动画已手动停止');
  }
}

3. 启动动画+添加手动停止入口 #

最后，咱们在页面DOM加载完成后启动动画，还可以加个按钮方便手动停止：

<!-- 可选：添加手动停止按钮 -->
<button onclick="stopAnimationLoop()">停止加载动画</button>

<script>
// 页面DOM结构加载完成后启动动画循环
document.addEventListener('DOMContentLoaded', startAnimationLoop);
</script>

关键注意点 #

• 确保你的CSS动画时长（比如上面示例的1秒）小于循环间隔（4秒），避免两次动画重叠导致混乱；
• 页面加载完成的判断用document.readyState === 'complete'，这个状态表示所有资源（图片、样式等）都加载完毕；
• 停止动画时记得清除定时器和事件监听，避免内存泄漏。

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