JavaScript加载屏问题：window.onload使用错误的修复方案

我最近刚踩过一模一样的坑——为项目做加载屏时，想用JavaScript移除元素的display: none属性，但代码死活不生效。后来排查发现，问题根源出在window.onload的使用方式上！

问题复盘 #

一开始我的思路是对的：等页面加载完成后，把加载屏元素的display从none改成inline，但因为window.onload的写法错误，导致整个逻辑失效。比如我之前错误地写成了：

window.onload = loader(); // 错误：直接执行了函数，而非绑定事件

正确解法 #

要把函数引用赋值给window.onload，而不是立刻执行函数。正确的写法是：

// 定义处理加载屏的函数
function loader() {
  // 获取目标加载屏元素
  const loadingScreen = document.getElementById('loading-screen');
  // 移除display: none，设置为inline
  loadingScreen.style.display = 'inline';
}

// 正确绑定页面加载完成事件
window.onload = loader;

为什么之前的写法不对？ #

当你写window.onload = loader()时，JavaScript会立刻执行loader函数，这时候页面可能还没完全加载完成，DOM元素甚至还没被渲染出来，自然无法正确修改它的CSS属性。而window.onload = loader是把函数本身赋值给事件处理程序，只有当页面所有资源（包括DOM、图片等）加载完成后，才会触发这个函数，这时候操作DOM才是安全有效的。

亲测这样修改后，加载屏的显示逻辑就完美正常工作了！

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