当页面滚动至底部，动画却停滞在倒数第二帧——最后一帧图像始终无法显示。这并非神秘现象，而是一个典型的“边界索引”错误。本文将深入剖析这一问题的根本原因，并提供可直接应用的修复方案，涵盖预加载、帧序号计算以及边界处理等关键环节。
基于滚动位置切换JPEG序列帧的Canvas动画，若最后一帧（例如第750帧）始终无法渲染，通常并非性能瓶颈或加载问题，而是由于数组索引与帧序号之间的映射逻辑存在系统性越界偏差。核心问题集中体现在两处关键的边界处理上。
? 问题定位：双重索引偏移
预加载循环遗漏了最后一帧
原始代码中使用了for (let i = 1; i < frameCount; i++)。当frameCount = 750时，循环执行到i = 749即终止，images[748]对应第 749 帧，第 750 帧从未被创建，更谈不上加载。帧序号计算执行了强制截断
Math.min(frameCount - 1, Math.ceil(scrollFraction * frameCount))这条语句将结果上限锁定为 749。即使滚动条滚动到底部（scrollFraction = 1），理论上Math.ceil(1 * 750) = 750，但会被Math.min强制截断为 749。而images[749]并不存在（数组长度仅为 749），最终绘制的是undefined，导致画面显示为黑色。
✅ 正确修复方案
1. 修正预加载范围，确保第 750 帧被加载
const preloadImages = () => { const images = []; // 关键修改：i <= frameCount，确保加载 1 到 750 共 750 张图 for (let i = 1; i <= frameCount; i++) { const img = new Image(); img.src = currentFrame(i); images.push(img); } return images;};
2. 移除多余的截断，信任数学计算本身
const frameIndex = Math.ceil(scrollFraction * frameCount);// 不再使用 Math.min(frameCount - 1, ...) —— 因为 scrollFraction ∈ [0, 1]，// 所以 frameIndex ∈ [1, frameCount]，且已通过 preload 确保 images[frameIndex-1] 存在
3. 安全访问图像并添加边界兜底，增强鲁棒性
const updateImage = index => { // 防御性检查：确保 index 在有效范围内 [1, frameCount] if (index < 1 || index > frameCount) return; const img = images[index - 1]; // 数组索引从 0 开始 context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(img, 0, 0, canvas.width, canvas.height);};
⚠️ 注意事项与最佳实践
- 索引一致性：本方案采用 1-based 帧编号（即 photo_animation4/0001.jpg → index=1），所有逻辑需统一遵循此约定，避免混用0-based与1-based造成混乱。
- 首帧加载时机：原代码中单独加载
firstImage的做法，在preloadImages()已包含全部帧的前提下，可完全移除。改用Promise.all(images.map(img => new Promise(r => img.onload = r)))实现真正的全量就绪检测，更简洁可靠。 - 滚动精度优化：
scrollTop / (scrollHeight - innerHeight)在动态内容下可能因布局抖动产生微小误差。建议在scroll事件中添加防抖，或直接使用requestAnimationFrame节流：
let isScrolling;window.addEventListener('scroll', () => { clearTimeout(isScrolling); isScrolling = setTimeout(() => { const scrollTop = html.scrollTop; const maxScrollTop = html.scrollHeight - window.innerHeight; const scrollFraction = maxScrollTop === 0 ? 0 : scrollTop / maxScrollTop; const frameIndex = Math.max(1, Math.min(frameCount, Math.ceil(scrollFraction * frameCount))); if (frameIndex !== currentFrameIndex) { currentFrameIndex = frameIndex; updateImage(currentFrameIndex); } }, 16);});
修复完成后，滚动至页面底部时，scrollFraction ≈ 1 → frameIndex = 750 → images[749] 成功渲染，最后一帧即可稳定呈现。请记住：动画的完整性，源于精确的索引数学，而非依赖肉眼调试碰运气。
