我有一个预加载器正在 <body> 前面加载但不在网站前面 <navbar>或{% block content %} 。 #preloader{z-index:999;}
- Django 2.2.7
- Bootstrap 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 %} 之上但在导航栏下方。我认为这意味着它与加载顺序有关？
如何让它显示在网站上的上方所有内容？
最佳答案
问题来自于 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>关于javascript - 预加载器加载在 block 内容和导航栏后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60059322/