时间戳

首页 > 解决方案 > 块内容和导航栏后面的预加载器加载

javascript - 块内容和导航栏后面的预加载器加载

问题描述

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

$(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 %}但在导航栏的下方。我认为这意味着它与加载顺序有关？

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

标签： javascriptjqueryhtmlcssdjango

解决方案

问题来自您:before在 css 中的元素。只需将其与#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>

推荐阅读