如何检测页面加载/重载取消事件并优化中断后处理？

当页面加载或重载时用户点击停止按钮，浏览器默认会渲染已接收到的部分DOM，导致页面呈现残缺状态，以下是几种更友好的替代方案：

1. 基础DOM控制方案 #

核心思路是加载完成前隐藏页面内容，中断时切换到中断提示：

• 初始状态下，页面主体内容设为隐藏，只展示加载提示。
• 页面完全加载完成后，再显示主体内容并隐藏加载提示。
• 捕获加载中断事件，切换到“加载已中断”提示，同时可清空已加载的残缺内容，避免用户看到混乱的页面。

实现代码：

<style>
  .page-content { display: none; }
  .status-box { text-align: center; padding: 2rem; }
  .interrupt-tip { display: none; }
</style>

<div class="status-box loading">页面加载中...</div>
<div class="status-box interrupt-tip">页面加载已中断 <button onclick="location.reload()">重新加载</button></div>
<div class="page-content">
  <!-- 你的页面实际内容 -->
</div>

<script>
  // 加载完成后展示内容
  window.addEventListener('load', () => {
    document.querySelector('.loading').style.display = 'none';
    document.querySelector('.page-content').style.display = 'block';
  });

  // 监听加载中断事件
  document.addEventListener('abort', () => {
    document.querySelector('.loading').style.display = 'none';
    document.querySelector('.interrupt-tip').style.display = 'block';
    // 清空已加载的残缺内容（可选）
    document.querySelector('.page-content').innerHTML = '';
  });

  // 兼容部分不触发abort事件的浏览器：监听readyState变化
  document.addEventListener('readystatechange', () => {
    if (document.readyState === 'interactive') {
      // 设一个短延迟，判断是否能进入complete状态
      setTimeout(() => {
        if (document.readyState !== 'complete') {
          document.querySelector('.loading').style.display = 'none';
          document.querySelector('.interrupt-tip').style.display = 'block';
          document.querySelector('.page-content').innerHTML = '';
        }
      }, 1000);
    }
  });
</script>

2. 按需加载场景的进阶方案（SPA/自定义加载流程） #

如果是单页应用或者需要手动控制资源加载的场景，用Fetch API配合AbortController可以更精准地控制加载流程：

• 用自定义的取消按钮触发请求中断，同时监听浏览器原生的加载中断。
• 中断时直接展示提示，不渲染任何未完成的内容。

代码示例：

const abortController = new AbortController();
const interruptTip = document.querySelector('.interrupt-tip');
const loadingTip = document.querySelector('.loading');
const contentBox = document.querySelector('.page-content');

// 绑定自定义取消按钮
document.querySelector('.custom-cancel-btn').addEventListener('click', () => {
  abortController.abort();
});

// 发起页面内容请求
fetch('/path-to-your-content', { signal: abortController.signal })
  .then(res => res.text())
  .then(html => {
    loadingTip.style.display = 'none';
    contentBox.innerHTML = html;
    contentBox.style.display = 'block';
  })
  .catch(err => {
    if (err.name === 'AbortError') {
      loadingTip.style.display = 'none';
      interruptTip.style.display = 'block';
      contentBox.innerHTML = '';
    }
    // 处理其他加载失败情况
  });

关键注意点 #

• 部分浏览器对文档级的abort事件支持有限，需要结合readystatechange事件做兼容判断。
• 清空残缺内容时，注意移除已绑定的事件监听，避免内存泄漏。
• 重新加载按钮可添加防抖逻辑，防止用户频繁触发重载。

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