Как остановить загрузчик JQuery после загрузки страницы?

Question

Я не могу заставить загрузчик JQuery исчезнуть после загрузки веб-страницы.Какие типы проблем обычно приводят к тому, что загрузчик не останавливается?

Мой веб-сайт создается с использованием инфраструктуры Django и находится на локальном компьютере "localhost: 8000".Я пытался очистить кэш и куки, но это ничего не делает.Я также попытался установить тайм-аут, но, похоже, это тоже не сработало.

Одна из проблем, с которыми я столкнулся, - это где разместить загрузчик, поэтому я решил, что лучше поместить его в файл 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>