Question

我有一个覆盖层，一旦所有内容都加载到页面中（基本上创建一个预加载器），我就希望显示为“无”。

我看不到我的代码有什么问题，因此我不确定为什么它不起作用？

任何帮助都会很棒：-）

var overlay = document.getElementById("overlay");

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


<div id="overlay">
  <div id="preloadSpinner">
    <img class="spin" src="image">
  </div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/67_DXhS3_Hc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


#overlay {
   height: 100%;
   Width: 100%;
   background: rgba(0, 0, 0, 1);
   position: fixed;
   left: 0;
   top: 0;
}

.spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin:-60px 0 0 -60px;
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;
  }

  @-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
  }
  @-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
  }
  @keyframes spin {
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }  
  }

js小提琴：https://jsfiddle.net/gxL7erwy/28/

Answer 1

好吧，小提琴被设置为在window.onload上运行，因此您要绑定到window.onload内部的window.onload

所以您的代码基本上是

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

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

更改JSFiddle以在主体中运行脚本，它将起作用。（点击JavaScript面板中的齿轮图标，然后调整下拉菜单）

创建window.AddEventListener时，div不显示为``none''

1 个答案: