jquery - 页面加载后如何停止 JQuery 加载程序？

Question

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

我的网站是使用 Django 框架构建的，位于本地机器“localhost:8000”上。我试图清除缓存和 Cookies，但这没有任何作用。我也尝试过设置超时，但这似乎也不起作用。

我关心的一个问题是将加载器放在哪里，所以我决定将它放在 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>