页面加载完成后移除加载屏的JavaScript实现方法

首先你需要补全CSS里缺失的动画定义——你的.dissaper类用了fadeOut动画，.ring用了ring动画，但没写具体的@keyframes规则，先加上：

@keyframes fadeOut {
  from { opacity: 1; }
  to { 
    opacity: 0; 
    visibility: hidden; /* 动画结束后隐藏元素，避免遮挡页面交互 */
  }
}

@keyframes ring {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

接下来用JavaScript实现加载完成后添加消失类，有两种常用场景的实现方式：

方式1：等待所有资源加载完成（图片、样式、脚本等） #

用window.onload事件，它会在页面所有资源（包括图片、外部样式/脚本）都加载完毕后触发，适合需要确保页面完全就绪再隐藏加载屏的场景：

window.onload = function() {
  const loader = document.querySelector('.loader');
  loader.classList.add('dissaper');
};

方式2：等待DOM结构加载完成（无需等图片等资源） #

如果不需要等图片等外部资源加载完，只想DOM解析完成就隐藏加载屏，用DOMContentLoaded事件，触发时机更早：

document.addEventListener('DOMContentLoaded', function() {
  const loader = document.querySelector('.loader');
  loader.classList.add('dissaper');
});

完整代码示例 #

把所有代码整合到一起，还加了个小优化（给.ring添加上边框，让旋转动画更明显）：

<!DOCTYPE html>
<html>
<head>
  <style>
    .loader {
      position: fixed;
      display: flex;
      align-items: center;
      align-self: center;
      justify-content: center;
      background-color: #02171C;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 9999; /* 确保加载屏在最上层 */
    }

    .dissaper {
      animation: fadeOut 1s forwards;
    }

    .ring {
      position: absolute;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      animation: ring 1.5s linear infinite;
      border: 3px solid transparent;
      border-top-color: #649737; /* 添加上边框，让旋转效果更直观 */
    }

    .ring:before {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      box-shadow: 0 0 10px #6497373b;
      border-radius: 50%;
    }

    span {
      color: #649737;
      font-size: 20px;
      letter-spacing: 1px;
      line-height: 200px;
    }

    @keyframes fadeOut {
      from { opacity: 1; }
      to { 
        opacity: 0; 
        visibility: hidden;
      }
    }

    @keyframes ring {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="loader">
    <div class="ring"></div>
    <span class="isLoaded">LOADING...</span>
  </div>

  <!-- 页面其他内容示例 -->
  <h1>欢迎来到我的页面</h1>
  <p>这里是页面正文内容</p>

  <script>
    // 选择一种方式使用即可
    // 方式1：等所有资源加载完成
    window.onload = function() {
      const loader = document.querySelector('.loader');
      loader.classList.add('dissaper');
    };

    // 方式2：等DOM结构加载完成
    // document.addEventListener('DOMContentLoaded', function() {
    //   const loader = document.querySelector('.loader');
    //   loader.classList.add('dissaper');
    // });
  </script>
</body>
</html>

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