Question

加载网页后，我无法让JQuery加载器消失。哪些类型的问题通常会导致加载程序无法停止？

我的网站是使用Django框架构建的，并且位于本地计算机“ localhost：8000”上。我曾尝试清除缓存和Cookie，但这无济于事。我也尝试过设置超时，但这似乎也不起作用。

我最关心的是将加载器放置在哪里，所以我决定最好将其放置在base.html上。这会影响到它吗？

在我的base.html文件中：

<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
    <script>
       $(function(){
          $(window).on("load", function(){
              $(this).remove();
              });
          });
        });
    </script>

我的CSS代码：

.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #242f3f;
  display:flex;
  justify-content: center;
  align-items: center;
}
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #Fff;
  animation: loader 2s infinite ease;
}
.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(180deg);}
  50% { transform: rotate(180deg);}
  75% { transform: rotate(360deg);}
  100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
  0% { height: 0%;}
  25% { height: 0%;}
  50% { height: 100%;}
  75% { height: 100%;}
  100% { height: 0%;}
}

我希望加载器旋转，直到页面加载，然后逐渐消失，但它所做的就是继续旋转。

此代码已在其他网站上重复使用。我的目标是使其工作，然后检查代码以了解其工作方式，以便我可以创建自己的加载器。

预先感谢您的帮助！

编辑：当我将JQuery代码放在html文件的顶部时，它将加载到博客应用程序的后面，并继续在后台旋转。

Answer 1

使用$(".loader-wrapper").remove();代替$(this).remove();

将您的js更改为

<script>
 $(window).on('load',function(){
      $('.loader-wrapper').remove();
  });
 </script>

Answer 2

在您的html脚本部分：

<script>

$(window).on("load", function(){
    $(document).ready(function(){
        $('.loader-wrapper').remove()
    })
})
</script>

页面加载后如何停止JQuery加载器？

2 个答案: