块内容和导航栏后面的预加载器加载答案

【问题标题】：Pre-loader loads behind block content and navbar块内容和导航栏后面的预加载器加载
【发布时间】：2020-05-20 09:29:10
【问题描述】：

我有一个预加载器，它在<body> 前面加载，但不在<navbar> 或{% block content %} 站点前面。 #preloader{z-index:999;}

Django 2.2.7
引导程序 4.4.1
jQuery 3.4.1

$(window).on('load', function() {
  $('#preloader').addClass('loaded');
  setTimeout(function(){
    $('#preloader').addClass("notta");
}, 2000);
});

#preloader:before {
  content: '';
  z-index: 999;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,1);
}
#preloader.loaded {
  opacity: 0;
  transition: .3s ease-in 1s;
}
#preloader.notta {
    display: none;
}

<header>
<div class="flex-center" id="preloader">
    <div class="preloader-wrapper active">
        <div class="spinner-grow text-warning" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
</div>
</header>

如果我将预加载器放在<body> 的底部，它将加载到{% block content %} 的顶部但在导航栏的下方。我认为这意味着它与加载顺序有关？

如何让它显示在上方 网站上的所有内容？

【问题讨论】：

标签： javascript jquery html css django

【解决方案1】：

问题来自 css 中的 :before 元素。只需将其与#preloader 结合即可：

  $(window).on('load', function() {
    $('#preloader').addClass('loaded');
    setTimeout(function() {
      $('#preloader').addClass("notta");
    }, 2000);
  });

#preloader {
  color: white;
  z-index: 999;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
}

#preloader.loaded {
  opacity: 0;
  transition: .3s ease-in 1s;
}

#preloader.notta {
  display: none;
}

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  
<header>
  <div class="flex-center" id="preloader">
    <div class="preloader-wrapper active">
      <div class="spinner-grow text-warning" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
  </div>
</header>

【讨论】：

【解决方案2】：

您可以使用纯 Javascript 编写此代码

`let loader = document.getElementById('preloader');
window.addEventListener('load',function(){
loader.style.display = 'none';
});`

试试这个

【讨论】：

我喜欢 vanilla JS 的想法，但我的项目中已经有一点 JQuery 和 JS，所以这没什么大不了的。我通常专注于后端（Python/Django）。你介意告诉我使用 vanilla JS 有什么好处吗？
这是真的，但绝对不能回答这个问题。请将此comment 移至右侧部分delete 此帖子;)