Javascript Div未显示到'；无'；创建window.AddEventListener时

我有一个覆盖，我期待着显示'无'一旦所有的内容已加载到页面（基本上创建一个预加载）

我看不出我的代码有任何错误，因此我不确定它为什么不工作

任何帮助都很好：-）

var overlay=document.getElementById（“overlay”）；
addEventListener（'load'，function（））{
overlay.style.display='none'；
});
#覆盖层{
身高：100%；
宽度：100%；
背景：rgba（0,0,0,1）；
位置：固定；
左：0；
排名：0；
}
.旋转{
位置：绝对位置；
最高：50%；
左：50%；
宽度：120px；
高度：120px；
裕度：-60px0-60px；
-webkit动画：旋转4s线性无限；
-moz动画：旋转4s线性无限；
动画：旋转4s线性无限；
}
@-moz关键帧旋转{
100%{moz变换：旋转（360度）；}
}
@-webkit关键帧旋转{
100%{-webkit变换：旋转（360度）；}
}
@关键帧旋转{
100%{-webkit变换：旋转（360度）；变换：旋转（360度）；}
}

---

js fiddle:

您的fiddle设置为在window.onload上运行，因此您将绑定到window.onload内部的window.onload

所以你的代码基本上是

window.addEventListener('load', function() {
  var overlay = document.getElementById("overlay");

  window.addEventListener('load', function() {
    overlay.style.display = 'none';
  });
});

---

将JSFIDLE更改为在主体中运行脚本，它将正常工作。（单击JavaScript面板中的齿轮图标并调整下拉菜单）

您的小提琴设置为在window.onload上运行，因此您将绑定到window.onload中的window.onload

所以你的代码基本上是

window.addEventListener('load', function() {
  var overlay = document.getElementById("overlay");

  window.addEventListener('load', function() {
    overlay.style.display = 'none';
  });
});

---

将JSFIDLE更改为在主体中运行脚本，它将正常工作。（单击JavaScript面板中的齿轮图标并调整下拉列表）

想想为什么要尝试在window onload事件中更改样式，然后考虑是否需要在同一事件处理程序中获取要在其上操作的元素。想想为什么要尝试在window onload事件中更改样式，然后考虑是否需要在同一事件处理程序中获取要在其上操作的元素。