预加载器动画不起作用

Question

我尝试将预加载动画添加到我的网页。

我找到了我尝试应用的代码，

但是，尽管CSS可以正常工作，但JS不会将动画永久显示。

我的html：

<head>
    <script>
        var overlay = document.getElementById("overlay");

            window.addEventListener('load', function(){
              overlay.style.display = 'none';
            })
    </script>
    <title>Verify Account</title>
</head>
<body>
    <div id="overlay">
    <div class="spinner"></div> 
    </div>

我的CSS：

    .spinner{
    width: 80px;
    height: 80px;

    border: 2px solid #f3f3f3;
    border-top:3px solid #f25a41;
    border-radius: 100%;

    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    margin: auto;

    animation: spin 1s infinite linear;
}

@keyframes spin {
    from{
        transform: rotate(0deg);
    }to{
        transform: rotate(360deg);
    }
}

#overlay{
  height:100%;
  width:100%;
  position:fixed;
  left:0;
  top:0;
 }

我是JS的完全菜鸟，我可能只是以错误的方式来应用它..或以错误的方式来称呼它...不知道...我的错误在哪里？

当我的页面将处理表单时，这也将起作用吗？或者在处理表单时，是否应该修改某些内容以使此预加载也出现？

Answer 1

你快到了！

我可以推荐jQuery作为选项吗？ 如果是这样，这非常简单，那么这是您的代码的有效示例。 我包括了一个3秒的计时器，以便您可以看到它的动作-否则页面加载得如此之快，您再也看不到它。

https://jsfiddle.net/3f4c32qh/

$(document).ready(function(){ //fires when page is done loading

  setTimeout(
    function() 
    {
      //only need this part..however page loads fast
      //so this makes a 3 second pause
      $("#overlay").hide()
    }, 3000);

});

实际上，这是一种常见的做法，它有一个简写形式：

$(function(){

 //stuff to do once page has loaded

});

但是，如果您想使用纯JS方法-您的示例效果很好！ 只需确保将JS放在主体的末尾，就在结束body标签之前，而不是在head区域中。 这是带有原始代码的JSFiddle：

https://jsfiddle.net/be9g1a0b/2/

Answer 2

您应该将可见性设置为叠加层元素的隐藏。

 overlay = document.getElementById('overlay'); var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { overlay.style.visibility = "hidden"; } }; xhttp.open("GET", "https://httpbin.org/get", true); xhttp.send();

 .spinner { width: 80px; height: 80px; border: 2px solid #f3f3f3; border-top: 3px solid #f25a41; border-radius: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; animation: spin 1s infinite linear; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #overlay { height: 100%; width: 100%; position: fixed; left: 0; top: 0; }

 <div id="overlay"> <div class="spinner"></div> </div>

预加载器动画不起作用

问题描述

2 个解决方案

解决方案1
0 2017-11-23 02:26:40

解决方案2
0 已采纳 2017-11-23 02:40:15

预加载器动画不起作用

问题描述

2 个解决方案

解决方案1 0 2017-11-23 02:26:40

解决方案2 0 已采纳 2017-11-23 02:40:15

解决方案1
0 2017-11-23 02:26:40

解决方案2
0 已采纳 2017-11-23 02:40:15