如何预加载图像并触发首帧动画以消除页面首次交互时的卡顿-js教程-PHP中文网

如何预加载图像并触发首帧动画以消除页面首次交互时的卡顿

本文介绍通过覆盖图遮罩+自动预热动画的方式，解决页面首次点击图像动画卡顿（仅5fps）的问题，确保所有图像资源在用户交互前完成解码与渲染准备。

本文介绍通过覆盖图遮罩+自动预热动画的方式，解决页面首次点击图像动画卡顿（仅5fps）的问题，确保所有图像资源在用户交互前完成解码与渲染准备。

在现代 Web 动画中，「首次动画卡顿」是一个典型但易被忽视的性能陷阱：即使图片已通过 <link rel="preload"> 声明预加载，浏览器仍可能未完成图像解码（decode） 和 GPU纹理上传，导致 transition 或 transform 触发时出现严重掉帧（如您观察到的约 5fps）。单纯预加载（as="image"）仅保证网络层提前获取资源，不保证渲染层就绪——这正是您尝试后无效的根本原因。

✅ 正确解法：预热动画 + 解码强制触发

核心思路是：在 DOM 加载完成后、用户可见前，主动触发一次完整的图像切换流程，并用视觉遮罩隐藏该过程，从而强制浏览器完成所有图像的解码、布局计算与合成器准备。

1. HTML 结构增强（添加覆盖图）

<section class="section-2"><div class="image-container">
    <!-- 首帧覆盖图：纯 CSS 背景，立即渲染且无需解码延迟 -->
    <div class="cover-image" style="background-image: url('img.png');"></div>

    <!-- 真实 img 元素，用于后续交互动画 -->
    <img src="img.png" alt="Option 1" class="selectable-image active"><img src="img.png" alt="Option 2" class="selectable-image"><img src="img.png" alt="Option 3" class="selectable-image">
</div>
  <!-- ... text-selection-container 不变 -->
</section>

? 为什么用 background-image 的 cover？
因为 CSS 背景图在 background-size: cover 下会同步解码并立即渲染，且无 <img> 标签的默认尺寸计算开销，可作为零延迟占位。

2. CSS 关键样式（分层控制）

.image-container {
  position: relative; /* 使 cover-image 定位生效 */
}

.cover-image {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.cover-image.visible {
  opacity: 1;
}

.selectable-image {
  position: relative;
  z-index: 1;
  width: 0%;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* 更顺滑的缓动 */
}

.selectable-image.active,
.selectable-image.auto-active {
  opacity: 1 !important;
  width: 100% !important;
}

3. JavaScript 预热逻辑（精准时序控制）

document.addEventListener("DOMContentLoaded", () => {
  const selectableImage = document.querySelectorAll(".selectable-image");
  const coverImage = document.querySelector(".cover-image");

  // 【关键】立即触发预热动画：逐帧激活每张图，强制解码
  function warmUpAnimations() {
    selectableImage.forEach((img, index) => {
      // 每张图延迟 500ms 激活，模拟真实切换节奏
      setTimeout(() => {
        img.classList.add("auto-active");

        // 0.5s 后移除，避免干扰初始状态
        setTimeout(() => {
          img.classList.remove("auto-active");
        }, 500);
      }, index * 500);
    });

    // 显示 cover-image 遮罩（防止用户看到预热过程）
    coverImage.classList.add("visible");

    // 在全部预热结束（3×500ms + 200ms 缓冲）后隐藏遮罩
    setTimeout(() => {
      coverImage.classList.remove("visible");
    }, (selectableImage.length * 500) + 200);
  }

  // 立即执行预热（不等待 window.load，因图片已在 preload 中）
  warmUpAnimations();

  // ✅ 保留原有交互逻辑（无需修改）
  const textOption = document.querySelectorAll(".text-option");
  textOption.forEach(option => {
    option.addEventListener("click", () => {
      textOption.forEach((o, i) => {
        o.classList.toggle("active", o === option);
        selectableImage[i].classList.toggle("active", o === option);
      });
    });
  });
});

⚠️ 注意事项与进阶优化

不要依赖 window.onload：它需等待所有资源（含图片）完全加载完毕，而我们希望在 DOM 就绪后立刻启动预热，此时 preload 图片大概率已缓存就绪。
避免 !important 泛滥：生产环境建议用更高优先级选择器替代（如 .selectable-image.active），保持 CSS 可维护性。
响应式兼容：svw 单位在预热中表现稳定，但若需支持旧浏览器，可回退至 vw 并添加 @supports 检测。
进一步优化（可选）：对大图调用 img.decode() API（MDN 文档）显式解码，但需注意其 Promise 异步特性需与 setTimeout 时序协调。