页面内容加载完成后Preloader持续加载不消失问题求助

嘿，我一眼就揪出问题所在啦！你的预加载器一直停着不消失，核心原因是事件监听的名称写错了，咱们一步步来修正：

1. 核心错误：用了不存在的事件名 #

你当前的JS代码里监听了一个浏览器根本没有的"loader"事件：

window.addEventListener("loader", function () { 
  loader.style.display = "none"; 
})

页面加载完成后会触发的原生事件是"load"（当所有资源如图片、脚本、样式都加载完毕时触发）；如果只需要DOM结构加载完成就隐藏预加载器，也可以用"DOMContentLoaded"事件。

2. 修正后的完整代码 #

JavaScript部分（修正事件名） #

var loader = document.getElementById("loader"); 
// 监听页面全部资源加载完成的事件
window.addEventListener("load", function () { 
  loader.style.display = "none"; 
})

CSS部分（顺便修正拼写小错误） #

你原来的CSS里widows是笔误，应该是width，另外补充了动画的完整结束状态：

body { 
  height: 100%; 
  width: 100%; /* 修正widows为width */
  overflow: hidden; 
} 

.loader { 
  position: absolute; 
  height: 80px; 
  width: 80px; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  border: 6px solid lightgrey; 
  border-radius: 100%; 
  border-top: 6px solid skyblue; 
  animation: spin 1s infinite linear; 
} 

@keyframes spin { 
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); } /* 补充完整动画结束状态 */
}

3. 额外优化说明 #

• 如果希望DOM结构加载完成就隐藏预加载器（不用等图片等大资源），可以把"load"换成"DOMContentLoaded"：

  window.addEventListener("DOMContentLoaded", function () { 
    loader.style.display = "none"; 
  })
  

• 记得确保你的HTML里有对应id的元素：

  <div id="loader" class="loader"></div>
  

这样修改后，页面加载完成后预加载器就会自动消失啦！

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