页面跳转后如何自动恢复默认光标样式

本文讲解如何避免因 JavaScript 设置 cursor: wait 后未及时重置，导致用户返回上一页时光标仍卡在“等待”状态的问题，提供基于 DOM 加载事件的可靠解决方案。

本文讲解如何避免因 javascript 设置 `cursor: wait` 后未及时重置，导致用户返回上一页时光标仍卡在“等待”状态的问题，提供基于 dom 加载事件的可靠解决方案。

在 Web 开发中，为提升用户体验，常通过临时修改 document.body.style.cursor 为 'wait' 来提示用户当前正在执行异步操作（如登录提交、页面跳转）。但若仅在跳转前设置 wait，而未在目标页加载完成或返回时主动还原，就会出现“光标卡死”问题——尤其在浏览器后退（Back）时，原页面的 cursor: wait 样式可能被继承或残留，造成视觉误导。

根本原因在于：window.onload 或 document.ready 仅在当前页面首次加载完成时触发，而浏览器后退操作通常会从缓存中快速恢复页面（即 bfcache），此时 onload 不会再次执行，导致 cursor 无法重置。

✅ 正确做法是：在页面开始加载时统一设为 wait，并在 DOM 结构就绪后立即切回 default，不依赖 onload（它等待所有资源如图片、脚本加载完毕，延迟高且不可靠）：

// 页面加载初期即启用等待光标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);

这样既保证首屏加载时的反馈一致性，又彻底规避了历史导航导致的光标残留问题。