页面完全渲染前显示覆盖层的最优方案及$(window).load未触发问题解决

嘿，我来帮你搞定这个页面加载覆盖层的问题！你现在用定时器的方案确实不够靠谱，因为没法精准判断页面什么时候真的加载完成，而且还遇到了$(window).load相关的问题，我来一步步给你拆解解决。

首先，说说$(window).on('load')不触发的可能原因 #

你写的$(window).on('load', ...)语法是没问题的（jQuery 3.0之后移除了$(window).load()直接调用的方式，但.on('load')是兼容的），但可能出现以下情况让你误以为它没触发：

• 页面资源太少：如果页面没有需要加载的图片、外部样式/脚本等资源，load事件会和DOMContentLoaded几乎同时触发，覆盖层刚显示就消失，看起来像没执行。你可以在load事件回调里加个console.log('页面加载完成')，看看控制台有没有输出，就能确认是否触发了。
• 资源加载异常：极少数情况下，如果某个资源加载卡住（比如图片链接失效但浏览器没抛出错误），可能会延迟load事件触发，但这种情况很少见，一般浏览器最终还是会触发load。

最优实现方案：让覆盖层默认显示，监听完成事件隐藏 #

定时器的核心问题是没法精准匹配页面加载完成的时机，我们换个思路：让覆盖层一开始就显示，等页面完全加载完成后再隐藏，这样既不会有闪烁，也能精准控制时机。

修改后的CSS代码 #

.overlay{ 
  position: fixed; 
  padding: 0; 
  margin: 0; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0, 0, 0, .3); 
  opacity: .8; 
  pointer-events: none;
  /* 关键：默认显示，不需要display:none */
}

修改后的JS代码 #

// 监听window的load事件：等待所有资源（图片、样式、脚本等）加载完成
$(window).on('load', function() { 
  $(".overlay").fadeOut(); 
});

// 兜底方案（可选）：防止极端情况下load事件未触发
setTimeout(function() {
  $(".overlay").fadeOut();
}, 5000); // 5秒后强制隐藏，可根据你的页面资源情况调整时间

更可靠的备选方案：监听document.readyState #

如果你担心load事件的兼容性或者触发问题，可以用document.readyState来判断页面状态，它会明确告诉你页面是否完全加载完成：

function hideOverlayWhenReady() {
  if (document.readyState === 'complete') {
    $(".overlay").fadeOut();
    // 移除监听，避免重复执行
    document.removeEventListener('readystatechange', hideOverlayWhenReady);
  }
}

// 监听状态变化
document.addEventListener('readystatechange', hideOverlayWhenReady);
// 初始检查一次，防止状态已经是complete了
hideOverlayWhenReady();

为什么这个方案更好？ #

1. 避免页面闪烁：覆盖层默认显示，用户打开页面第一眼看到的就是覆盖层，不会先看到未加载完成的页面再弹出覆盖层，体验更流畅。
2. 精准触发时机：无论是window.load还是document.readyState，都是浏览器原生提供的、判断页面完全加载完成的标准方式，比定时器靠谱得多。
3. 兜底保障：可选的定时器兜底能防止极端情况下覆盖层一直显示的问题，给用户一个保底的体验。

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