Question

当用户单击项目中的登录按钮时，我需要添加页面预加载器。因此，我通过包含提交按钮来创建示例页面。并使用CSS和javascript函数创建了一个微调器作为预加载器，以执行微调器并将其淡出并加载另一个页面调用welcome.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

    <div class="overlay"> <div class="spinner"></div>
  </div>
 <input type="submit" name="click me" id="submit">


    **here is the javascript function**

 <script>
(function(){
  var spinner =document.getElementById("spinner");
  var loading = 0;
  var id = setInterval(frame,20);

  function frame(){
    if(loading==100){
      clearInterval(id);
      window.open("welcome.html","_self");
    } else {
      loading = loading + 1;
      if(loading==90){
        spinner.style.animation ="fadeout 1s ease";

      }
    }
  }
})();

 </script>
</body>
</html>



 **here is the style sheet for preloader**

 .overlay{
   position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ff6347;
z-index: -999;

 }

 .spinner {
    position: fixed;
top: 33%;
left: 48%;
  width: 60px;
  height: 60px;
  background-color: black;

    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

    **here is the keyframe code for fadeout**

@keyframes fadeout {
    from {opacity: 1;}
  to{opacity: 0;}
    }
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

我需要的是，用户单击按钮，然后显示预加载器。但是问题是，当我运行页面按钮时，同时正在运行微调器预加载器，而无需单击按钮，并且在加载welcome.html页面打开之后。

Answer 1

您应该最初隐藏微调框，并且仅在加载开始时显示它。因此，您可以将框架功能更改为以下形式：

script type="text/javascript">
        $(document).ready(function() {    
                $('#btn-month1').click(function () {

                    fetch_month1();

                  });
        });

 function fetch_month1()
            {
                $.ajax({
                    url:"month1.php",
                    method:"POST",
                    success:function(data) {
                        $('#link-con').html(data);
                    }
                });
            }
    </script>

您还可以在“提交”按钮上添加某种点击侦听器，而不是设置一个间隔来检查页面加载是否已经每20毫秒一次，这似乎是不必要的。

然后在您的CSS中更改它：

function loading(){
    if(loading==0) {
      spinner.classList.add('active');
    } else if(loading==100){
      clearInterval(id);
      window.open("welcome.html","_self");
      spinner.classList.remove('active');
    } else {
      loading = loading + 1;
      if(loading==90){
        spinner.style.animation ="fadeout 1s ease";
      }
    }
}

Answer 2

首先添加

.overlay{ display:none; }

在CSS中，然后在“提交”按钮的单击功能上添加

document.getElementById("overlayId").style.display = "block";

如果您使用的是javascript

和

$(".overlay").css("display", "block");

如果您使用的是jQuery

N.B .： overlayId是重叠DIV的ID

用户单击按钮时如何添加页面预加载器

2 个答案: