本文详解页面跳转后光标仍卡在等待状态的解决方案，分析因 JavaScript 设置 cursor: wait 后未及时重置导致的 bfcache 光标残留问题，并提供基于 DOMContentLoaded 事件的可靠修复方法。
光标卡在“等待”状态无法恢复，虽然看似小问题，但实际体验非常糟糕——用户点击按钮后页面跳转，新页面理应显示默认光标样式，却始终处于转圈状态，尤其是在浏览器后退导航时，显得极不专业。那么，光标卡住的根本原因是什么？如何干净利落地解决页面跳转后光标恢复问题？本文将详细拆解。
在 Web 开发中，为了向用户提供操作反馈，开发者常会在异步操作（如登录提交、页面跳转前）将 document.body.style.cursor 临时设置为 'wait'。初衷良好，但若仅在跳转前设置 wait，而未在目标页面加载完成或返回时主动重置光标样式，问题便会出现——浏览器后退时，原来的 cursor: wait 样式很可能被 bfcache（页面缓存）机制继承或残留，导致光标持续旋转，无法恢复默认。
根本原因其实并不复杂：window.onload 或 document.ready 事件仅会在当前页面首次加载完成时触发一次。而浏览器后退操作通常直接从缓存（bfcache）中恢复页面，此时 onload 不再执行，光标重置逻辑自然失效，导致光标残留问题。
✅ 正确的解决方案非常直接：页面加载开始时统一设置 wait 光标，待 DOM 结构解析完成后立即切换回 default。切勿依赖 onload 事件，因为它需要等待所有资源（图片、脚本等）加载完毕才触发，延迟高且不可靠。使用 DOMContentLoaded 事件才是更可靠的做法：
// 页面加载初期即启用等待光标
document.body.style.cursor = 'wait';
// DOM 解析完成即恢复默认光标（比 onload 更早、更可靠）
document.addEventListener('DOMContentLoaded', () => {
document.body.style.cursor = 'default';
});
⚠️ 几个容易踩的坑：
- 不要在 onclick 事件中仅设置 wait 而不配套还原逻辑——例如原代码中的
defaultPointer()函数根本未被调用。 - 原问题中
defaultPointer()内部错误地将 cursor 设置为'wait'（正确应为'default'），这是典型的笔误，需要特别注意。 - 不要依赖
window.onunload或beforeunload来清理光标，现代浏览器对这两个事件有诸多限制，极不可靠。 - 对于 SPA 应用（如 React/Vue），应在路由离开前主动重置光标，或封装成可复用的 loading 状态管理逻辑，避免光标残留。
更进一步，为了更健壮的光标管理，可以封装成可复用函数，支持嵌套调用和自动清理：
const cursor = {
wait: () => document.body.style.cursor = 'wait',
reset: () => document.body.style.cursor = 'default'
};
// 全局初始化
cursor.wait();
document.addEventListener('DOMContentLoaded', cursor.reset);
这样既能保证首屏加载时的反馈一致性，又能彻底规避历史导航导致的光标残留问题。以后遇到类似场景，直接复用即可，省心高效。
