如何处理Docsify错误页面？加载无响应问题求助

• 自定义加载超时检测
  给Docsify加个定时器，超过设定时间还没加载完就提示用户并终止加载流程。比如设置5秒超时，代码示例：

  window.$docsify = {
    onload: function() {
      const loadingTimer = setTimeout(() => {
        const loadingEl = document.querySelector('.loading');
        if (loadingEl && loadingEl.style.display !== 'none') {
          loadingEl.innerHTML = '加载超时，请刷新页面重试';
          // 移除未完成的加载请求，避免继续消耗资源
          document.querySelectorAll('script[src], link[rel="stylesheet"]').forEach(el => el.remove());
        }
      }, 5000);
  
      // 页面加载完成后清除定时器
      window.addEventListener('DOMContentLoaded', () => clearTimeout(loadingTimer));
    }
  };
  

• 用钩子拦截加载请求并设置超时
  借助Docsify的beforeLoad钩子，手动发起请求并设置超时时间，请求失败或超时后直接返回错误提示：

  window.$docsify = {
    beforeLoad: function(url, next) {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url);
      xhr.timeout = 5000;
      xhr.onload = () => {
        next(xhr.status === 200 ? xhr.responseText : '加载失败，请检查网络或刷新页面');
      };
      xhr.ontimeout = () => next('加载超时，请刷新页面重试');
      xhr.onerror = () => next('加载出错，请检查网络连接');
      xhr.send();
    }
  };
  

• 优化加载状态提示
  配合CSS修改超时后的样式，让提示更醒目：

  .loading.timeout {
    color: #ff4d4f;
    animation: none;
    font-size: 16px;
  }
  

  在JavaScript超时逻辑里给加载元素加上timeout类：loadingEl.classList.add('timeout')，就能切换到自定义的超时提示样式。

内容的提问来源于stack exchange，提问作者Weijing Jay Lin