加载图标2.5秒后未消失，页面无法正常显示求助

核心问题1：选择器语法错误 #

你的JavaScript代码中，选择.loader-wrapper元素时缺少类选择器前缀.，导致无法定位目标元素，自然无法添加invis类来隐藏加载层。

核心问题2：加载层隐藏后仍可能遮挡内容 #

仅设置opacity: 0只会让元素透明，但它仍会占据页面空间并阻挡下方内容的交互，需要补充样式彻底解除遮挡。

修复后的代码 #

1. 修正JavaScript选择器

function $(qry){return document.querySelector(qry);}
setTimeout(() => {
  $(".loader-wrapper").classList.add("invis") // 补充类选择器前缀.
}, 2500)

2. 优化CSS样式

.loader-wrapper {
  width: 100%;
  height: 100%;
  position: fixed; /* 改用fixed避免滚动时错位 */
  top: 0;
  left: 0;
  background-color: #000;
  display:flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.5s, visibility 0.5s; /* 增加visibility过渡 */
  visibility: visible;
  z-index: 9999; /* 确保加载层处于最上层 */
}
.loader-wrapper.invis {
  opacity: 0;
  visibility: hidden; /* 隐藏后不再响应交互 */
  pointer-events: none; /* 彻底禁止鼠标交互，防止遮挡下方内容 */
}

3. HTML保持不变

<div class="loader-wrapper">
  <img src="+load.svg" width="120px">
</div>

额外检查点 #

• 确认+load.svg文件路径正确，能正常加载
• 确保页面其他内容没有被错误设置的z-index遮挡

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