预加载器在完全加载之前显示网页的内容
我当时正在为我的网站制作一个预加载器，其中显示了一个动画，但问题是预加载器显示了网站的某些内容，甚至没有完全加载代码，像这样，
<!DOCTYPE html>
<html lang="en">
<head>
<div class="self-container" style="margin:0; padding: 0;">
<title>Diary Entry</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="/" style="font-family: 'Permanent Marker'">Archlight</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/create/">Create New Entry <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/profile/">Profile <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/logout/">Logout</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<br>
<br>
<div class="page">
<link rel= "stylesheet" type= "text/css" href = "/static/diary/updatepage.css">
<script src="https://cdn.tiny.cloud/1/tqa92zf2lukln0ritoavtb2b9ospf6898jnd0senmv5ahfk9/tinymce/5/tinymce.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loading Animation</title>
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<style>
.preload{
font-family: sans-serif;
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: deepskyblue;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease;
}
.loading{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 40px;
display: flex;
align-items: center;
transition: opacity 0.5 ease;
}
h1.text{
color: white;
position: fixed;
top: 40%;
}
.preload-finish{
opacity: 0;
pointer-events: none;
}
.obj{
width: 6px;
height: 4px;
background: white;
margin: 0 3px;
border-radius: 10px;
animation: loading 0.8s infinite;
}
.obj:nth-child(2){
animation-delay: 0.1s;
}
.obj:nth-child(3){
animation-delay: 0.2s;
}
.obj:nth-child(4){
animation-delay: 0.3s;
}
.obj:nth-child(5){
animation-delay: 0.4s;
}
.obj:nth-child(6){
animation-delay: 0.5s;
}
.obj:nth-child(7){
animation-delay: 0.6s;
}
.obj:nth-child(8){
animation-delay: 0.7s;
}
@keyframes loading {
0%{
height: 0;
}
50%{
height: 40px;
}
100%{
height: 0;
}
}
</style>
<div class="preload">
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<h1 class="text">Archlight</h1>
</div>
<script>
window.addEventListener("load", ()=>{
const preload = document.querySelector(".preload");
preload.classList.add("preload-finish");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sidebar</title>
</head>
<body>
<style>
/*Sidebar*/
#SideBar{
position: fixed;
width: 245px;
height: 100%;
background: #151719;
left: -245px;
transition: all 500ms linear;
}
#SideBar.active{
left:0px;
}
#SideBar ul li{
color: rgba(230,230,230,0.9);
list-style: none;
padding: 15px 10px;
border-bottom: 1px solid rgba(100,100,100,0.3);
}
#SideBar ul li a{
text-decoration: none;
color: white;
display: block;
}
#SideBar ul{
margin: 0;
padding: 0;
}
li.first{
margin-top: 60px;
border-top: 1px solid rgba(100, 100, 100, 0.3);
}
#SideBar .toggle-btn{
position: absolute;
left: 253px;
top: 30px;
cursor: pointer;
}
.toggle-btn{
cursor: pointer;
width:20px;
height:4px;
background:white;
position: relative;
transition: all .4s;
}
.toggle-btn::after {
content:"";
position: absolute;
background:white;
width:20px;
height:4px;
top: 7px;
transition: all .4s;
}
.toggle-btn::before {
content:"";
position: absolute;
background:white;
width:20px;
height:4px;
bottom: 7px;
margin-left: 0;
transition: all .4s;
}
.menu.active .toggle-btn::after {
transform: rotateZ(55deg) translate(-8px, 0px);
background:red;
}
.menu.active .toggle-btn::before {
transform: rotateZ(-55deg) translate(-7px, 0px);
background:red;
}
.menu.active .toggle-btn {
background:transparent;
}
</style>
<div id="what" class="SideBar">
<div id="SideBar">
<div class="menu">
<div class="toggle-btn" onclick="toggleSideBar()">
<script>
const menu = document.querySelector(".menu");
menu.addEventListener("click", () => {
menu.classList.toggle("active");
})</script>
</div>
</div>
<ul>
<li class="first link"><a href="#">Home</a></li>
<li><a href="#" class="link">About</a></li>
<li><a href="#" class="link">Contact</a></li>
</ul>
<script type="text/javascript">
function toggleSideBar(){
document.getElementById("SideBar").classList.toggle('active');
}
</script>
</div>
</div>
</body>
</html>
<br>
<div class="main-box">
<form action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="csrfmiddlewaretoken" value="JQ0xl4HmM1EkPrY4yWEX9PaTx2cOt5gPk0EOR4rbUuJ9Ur5ilPPolcooTgdauW1p">
<span><small>
</small></span>
<br>
<span><input type="text" name="title" value="Waiting" maxlength="50" class="title" required id="id_title"><input type="hidden" name="initial-title" value="Waiting" id="initial-id_title"></span>
<a href="/entry/6/delete" class="delete"><i class="fas fa-trash-alt fa-lg"></i></a>
<span><small>
</small></span>
<br>
<span><textarea name="content" cols="40" rows="10" id="content" class="content" required>
<p><strong>Still, Believe It's Bad?</strong></p>
<p>Waiting is probably my green day's favorite song!</p>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 14px; background-color: #ffffff;">I'm the son of rage and love<br />The Jesus of Suburbia<br />The bible of none of the above<br />On a steady diet of<br />Soda Pop and Ritalin<br />No one ever died for my<br />Sins in hell<br />As far as I can tell<br />At least the ones that I got away with</div>
<div class="secrsf" style="margin-top: 13px; color: #222222; font-family: arial, sans-serif; font-size: 14px; background-color: #ffffff;">And there's nothing wrong with me<br />This is how I'm supposed to be<br />In a land of make-believe<br />That don't believe in me</div>
<div class="secrsf" style="margin-top: 13px; color: #222222; font-family: arial, sans-serif; font-size: 14px; background-color: #ffffff;">Get my television fix<br />Sitting on my crucifix<br />The living room in my private womb</div></textarea></span>
<br>
<button type="submit">Submit</button>
</form>
</div>
<script>tinymce.init({
selector:'textarea',
plugins: "autoresize",
min_height: 500,
inline_boundaries: false,
setup: function (editor) {
editor.on('change', function (e) {
editor.save();
});
}
});
</script>
</div>
</div>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
在上面的图像中，正在等待，垃圾桶图标和汉堡包图标是我网页内容的一部分，不应显示。
我的预加载器代码：
window.addEventListener("load", ()=>{
const preload = document.querySelector(".preload");
preload.classList.add("preload-finish");
});.preload{
font-family: sans-serif;
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: deepskyblue;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease;
}
.loading{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 40px;
display: flex;
align-items: center;
transition: opacity 0.5 ease;
}
h1.text{
color: white;
position: fixed;
top: 20%;
}
.preload-finish{
opacity: 0;
pointer-events: none;
}
.obj{
width: 6px;
height: 4px;
background: white;
margin: 0 3px;
border-radius: 10px;
animation: loading 0.8s infinite;
}
.obj:nth-child(2){
animation-delay: 0.1s;
}
.obj:nth-child(3){
animation-delay: 0.2s;
}
.obj:nth-child(4){
animation-delay: 0.3s;
}
.obj:nth-child(5){
animation-delay: 0.4s;
}
.obj:nth-child(6){
animation-delay: 0.5s;
}
.obj:nth-child(7){
animation-delay: 0.6s;
}
.obj:nth-child(8){
animation-delay: 0.7s;
}
@keyframes loading {
0%{
height: 0;
}
50%{
height: 40px;
}
100%{
height: 0;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loading Animation</title>
</head>
<body>
<div class="preload">
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<h1 class="text">Archlight</h1>
</div>
</body>
</html>
那么，我要怎么做呢？顺便说一句，汉堡图标，垃圾图标和“等待”是一个文本框吗？
此外，我可以提供所有内容的代码，其中包括网页的组件，但是我的大部分代码都使用Django（Python）编写，因此难以理解，因此我必须提供页面源代码，很长无论如何，整页动画：
<!DOCTYPE html>
<html lang="en">
<head>
<div class="self-container" style="margin:0; padding: 0;">
<title>Diary Entry</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="/" style="font-family: 'Permanent Marker'">Archlight</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/create/">Create New Entry <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/profile/">Profile <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/logout/">Logout</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<br>
<br>
<div class="page">
<link rel= "stylesheet" type= "text/css" href = "/static/diary/updatepage.css">
<script src="https://cdn.tiny.cloud/1/tqa92zf2lukln0ritoavtb2b9ospf6898jnd0senmv5ahfk9/tinymce/5/tinymce.min.js"></script>
<style>
.preload{
font-family: sans-serif;
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: deepskyblue;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease;
}
.loading{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 40px;
display: flex;
align-items: center;
transition: opacity 0.5 ease;
}
h1.text{
color: white;
position: fixed;
top: 40%;
}
.preload-finish{
opacity: 0;
pointer-events: none;
}
.obj{
width: 6px;
height: 4px;
background: white;
margin: 0 3px;
border-radius: 10px;
animation: loading 0.8s infinite;
}
.obj:nth-child(2){
animation-delay: 0.1s;
}
.obj:nth-child(3){
animation-delay: 0.2s;
}
.obj:nth-child(4){
animation-delay: 0.3s;
}
.obj:nth-child(5){
animation-delay: 0.4s;
}
.obj:nth-child(6){
animation-delay: 0.5s;
}
.obj:nth-child(7){
animation-delay: 0.6s;
}
.obj:nth-child(8){
animation-delay: 0.7s;
}
@keyframes loading {
0%{
height: 0;
}
50%{
height: 40px;
}
100%{
height: 0;
}
}
</style>
<div class="preload">
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<h1 class="text">Archlight</h1>
</div>
<script>
window.addEventListener("load", ()=>{
const preload = document.querySelector(".preload");
preload.classList.add("preload-finish");
});
</script>
<style>
/*Sidebar*/
#SideBar{
position: fixed;
width: 245px;
height: 100%;
background: #151719;
left: -245px;
transition: all 500ms linear;
}
#SideBar.active{
left:0px;
}
#SideBar ul li{
color: rgba(230,230,230,0.9);
list-style: none;
padding: 15px 10px;
border-bottom: 1px solid rgba(100,100,100,0.3);
}
#SideBar ul li a{
text-decoration: none;
color: white;
display: block;
}
#SideBar ul{
margin: 0;
padding: 0;
}
li.first{
margin-top: 60px;
border-top: 1px solid rgba(100, 100, 100, 0.3);
}
#SideBar .toggle-btn{
position: absolute;
left: 253px;
top: 30px;
cursor: pointer;
}
.toggle-btn{
cursor: pointer;
width:20px;
height:4px;
background:white;
position: relative;
transition: all .4s;
}
.toggle-btn::after {
content:"";
position: absolute;
background:white;
width:20px;
height:4px;
top: 7px;
transition: all .4s;
}
.toggle-btn::before {
content:"";
position: absolute;
background:white;
width:20px;
height:4px;
bottom: 7px;
margin-left: 0;
transition: all .4s;
}
.menu.active .toggle-btn::after {
transform: rotateZ(55deg) translate(-8px, 0px);
background:red;
}
.menu.active .toggle-btn::before {
transform: rotateZ(-55deg) translate(-7px, 0px);
background:red;
}
.menu.active .toggle-btn {
background:transparent;
}
</style>
<div id="what" class="SideBar">
<div id="SideBar">
<div class="menu">
<div class="toggle-btn" onclick="toggleSideBar()">
<script>
const menu = document.querySelector(".menu");
menu.addEventListener("click", () => {
menu.classList.toggle("active");
})</script>
</div>
</div>
<ul>
<li class="first link"><a href="#">Home</a></li>
<li><a href="#" class="link">About</a></li>
<li><a href="#" class="link">Contact</a></li>
</ul>
<script type="text/javascript">
function toggleSideBar(){
document.getElementById("SideBar").classList.toggle('active');
}
</script>
</div>
</div>
<br>
<div class="main-box">
<form action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="csrfmiddlewaretoken" value="kYg1P61kNzGOilvbYjVec6Gxtd7Dt1keV8Uil6L9V2LDnlCpLc6FotU2Pr8ZuS5O">
<span><small>
</small></span>
<br>
<span><input type="text" name="title" value="Waiting" maxlength="50" class="title" required id="id_title"><input type="hidden" name="initial-title" value="Waiting" id="initial-id_title"></span>
<a href="/entry/6/delete" class="delete"><i class="fas fa-trash-alt fa-lg"></i></a>
<span><small>
</small></span>
<br>
<span><textarea name="content" cols="40" rows="10" id="content" class="content" required>
<p><strong>Still, Believe It's Bad?</strong></p>
<p>Waiting is probably my green day's favorite song!</p>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 14px; background-color: #ffffff;">I'm the son of rage and love<br />The Jesus of Suburbia<br />The bible of none of the above<br />On a steady diet of<br />Soda Pop and Ritalin<br />No one ever died for my<br />Sins in hell<br />As far as I can tell<br />At least the ones that I got away with</div>
<div class="secrsf" style="margin-top: 13px; color: #222222; font-family: arial, sans-serif; font-size: 14px; background-color: #ffffff;">And there's nothing wrong with me<br />This is how I'm supposed to be<br />In a land of make-believe<br />That don't believe in me</div>
<div class="secrsf" style="margin-top: 13px; color: #222222; font-family: arial, sans-serif; font-size: 14px; background-color: #ffffff;">Get my television fix<br />Sitting on my crucifix<br />The living room in my private womb</div></textarea></span>
<br>
<button type="submit">Submit</button>
</form>
</div>
<script>tinymce.init({
selector:'textarea',
plugins: "autoresize",
min_height: 500,
inline_boundaries: false,
setup: function (editor) {
editor.on('change', function (e) {
editor.save();
});
}
});
</script>
</div>
</div>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
预先感谢！
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？