刷新网页时我无法加载预加载器
Im not being able to load preloader when i refresh the webpage
嗨，我有两个 html 文件
Preloader.html（这是我的预加载器）
index.html（这是我的 mainpage/homepage）
现在我的问题是，当我从 preloader.html 加载我的网站时，它会像第一次一样完美地工作，它显示预加载器 5.5 秒然后打开 index.html .. 但即使在这种情况下，如果我重新加载网站index.html 没有加载 preloader.html
但是当我从 index.html 打开我的网站时.. preloader.html 没有显示并且它直接打开 index.html ..
所以我只想问你们，即使我点击 index.html
，我如何加载这个 preloader.html 5 秒？
简单来说，我只想加载这个 preloader.html 大约 5.5 秒，然后加载 index.html .. 即使我重新加载侧面，它也应该做同样的事情.. 怎么办？
这是我的
Preloader.html
<html>
<head>
<title>Expense Tracker</title>
<link rel="stylesheet" type="text/css" href="preload.css">
</head>
<body>
<svg width="910" height="120" id="Layer_1" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M62.8,63.8H28.7v31.6h38v9.5H17.4V17.3h47.3v9.5h-36v27.7h34.1V63.8z" stroke="white" stroke-width="5"/>
<path class="st0" d="M86.3,42l9,13.5c2.3,3.5,4.3,6.8,6.4,10.3h0.4c2.1-3.8,4.2-7,6.2-10.4l8.8-13.4h12.4L108,72.4l22.1,32.5h-13
l-9.2-14.2c-2.5-3.6-4.6-7.2-6.8-10.9h-0.3c-2.1,3.8-4.3,7.1-6.6,10.9l-9.1,14.2H72.5l22.4-32.1L73.5,42H86.3z"stroke="white" stroke-width="5"/>
<path d="M141.1,62.5c0-8.1-0.3-14.6-0.5-20.5h10.3l0.5,10.8h0.3c4.7-7.7,12.1-12.2,22.4-12.2c15.2,0,26.7,12.9,26.7,32
c0,22.6-13.8,33.8-28.6,33.8c-8.3,0-15.6-3.6-19.4-9.9h-0.3v34.2h-11.3V62.5z M152.4,79.3c0,1.7,0.3,3.3,0.5,4.7
c2.1,7.9,9,13.4,17.2,13.4c12.1,0,19.1-9.9,19.1-24.3c0-12.6-6.6-23.4-18.7-23.4c-7.8,0-15.1,5.6-17.3,14.2
c-0.4,1.4-0.8,3.1-0.8,4.7V79.3z" stroke="white" stroke-width="5"/>
<path d="M221.5,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H221.5z M255,67.3
c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H255z" stroke="white" stroke-width="5" />
<path d="M280.2,59c0-6.5-0.1-11.8-0.5-17h10.1l0.7,10.4h0.3c3.1-6,10.4-11.8,20.8-11.8c8.7,0,22.2,5.2,22.2,26.8v37.6
h-11.4V68.6c0-10.1-3.8-18.6-14.6-18.6c-7.5,0-13.4,5.3-15.3,11.7c-0.5,1.4-0.8,3.4-0.8,5.3v37.8h-11.4V59z"stroke="white" stroke-width="5"/>
<path d="M350.8,93.2c3.4,2.2,9.4,4.6,15.1,4.6c8.3,0,12.2-4.2,12.2-9.4c0-5.5-3.3-8.5-11.7-11.6
c-11.3-4-16.6-10.3-16.6-17.8c0-10.1,8.2-18.5,21.7-18.5c6.4,0,12,1.8,15.5,3.9l-2.9,8.3c-2.5-1.6-7-3.6-12.9-3.6
c-6.8,0-10.5,3.9-10.5,8.6c0,5.2,3.8,7.5,12,10.7c10.9,4.2,16.5,9.6,16.5,19c0,11.1-8.6,18.9-23.5,18.9c-6.9,0-13.3-1.7-17.7-4.3
L350.8,93.2z"stroke="white" stroke-width="5"/>
<path d="M410.2,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H410.2z M443.8,67.3
c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H443.8z"stroke="white" stroke-width="5"/>
<path d="M508.3,26.9h-26.7v-9.6h64.9v9.6h-26.8v78h-11.4V26.9z"stroke="white" stroke-width="5"/>
<path d="M550,61.6c0-7.4-0.1-13.8-0.5-19.6h10l0.4,12.4h0.5c2.9-8.5,9.8-13.8,17.4-13.8c1.3,0,2.2,0.1,3.3,0.4v10.8
c-1.2-0.3-2.3-0.4-3.9-0.4c-8.1,0-13.8,6.1-15.3,14.7c-0.3,1.6-0.5,3.4-0.5,5.3v33.5H550V61.6z"stroke="white" stroke-width="5"/>
<path d="M626.7,104.9l-0.9-7.9h-0.4c-3.5,4.9-10.3,9.4-19.2,9.4c-12.7,0-19.2-9-19.2-18.1c0-15.2,13.5-23.5,37.8-23.4
v-1.3c0-5.2-1.4-14.6-14.3-14.6c-5.9,0-12,1.8-16.4,4.7l-2.6-7.5c5.2-3.4,12.7-5.6,20.7-5.6c19.2,0,23.9,13.1,23.9,25.7v23.5
c0,5.5,0.3,10.8,1,15.1H626.7z M625,72.8c-12.5-0.3-26.7,2-26.7,14.2c0,7.4,4.9,10.9,10.8,10.9c8.2,0,13.4-5.2,15.2-10.5
c0.4-1.2,0.7-2.5,0.7-3.6V72.8z"stroke="white" stroke-width="5"/>
<path d="M699.4,102.6c-3,1.6-9.6,3.6-18.1,3.6c-19,0-31.3-12.9-31.3-32.1c0-19.4,13.3-33.4,33.8-33.4
c6.8,0,12.7,1.7,15.9,3.3l-2.6,8.8c-2.7-1.6-7-3-13.3-3c-14.4,0-22.2,10.7-22.2,23.8c0,14.6,9.4,23.5,21.8,23.5
c6.5,0,10.8-1.7,14-3.1L699.4,102.6z"stroke="white" stroke-width="5"/>
<path d="M724.1,70.8h0.3c1.6-2.2,3.8-4.9,5.6-7.2L748.4,42h13.8l-24.3,25.9l27.7,37.1h-13.9l-21.7-30.2l-5.9,6.5v23.7
h-11.3V12.6h11.3V70.8z"stroke="white" stroke-width="5"/>
<path d="M780.1,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H780.1z M813.6,67.3
c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H813.6z"stroke="white" stroke-width="5"/>
<path d="M838.8,61.6c0-7.4-0.1-13.8-0.5-19.6h10l0.4,12.4h0.5c2.9-8.5,9.8-13.8,17.4-13.8c1.3,0,2.2,0.1,3.3,0.4v10.8
c-1.2-0.3-2.3-0.4-3.9-0.4c-8.1,0-13.8,6.1-15.3,14.7c-0.3,1.6-0.5,3.4-0.5,5.3v33.5h-11.3V61.6z"stroke="white" stroke-width="5"/>
</svg>
</body>
<script>
setTimeout(function(){
window.location.href = 'index.html';
}, 6500);
</script>
<script type="text/javascript" src="app.js"></script>
</html
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Expense Tracker</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<style>
.button1 {
color: black;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<div class="svg-wrap">
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left"
d="M26.667 10.667q1.104 0 1.885 0.781t0.781 1.885q0 1.125-0.792 1.896l-14.104 14.104h41.563q1.104 0 1.885 0.781t0.781 1.885-0.781 1.885-1.885 0.781h-41.563l14.104 14.104q0.792 0.771 0.792 1.896 0 1.104-0.781 1.885t-1.885 0.781q-1.125 0-1.896-0.771l-18.667-18.667q-0.771-0.813-0.771-1.896t0.771-1.896l18.667-18.667q0.792-0.771 1.896-0.771z">
</path>
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-right"
d="M37.333 10.667q1.125 0 1.896 0.771l18.667 18.667q0.771 0.771 0.771 1.896t-0.771 1.896l-18.667 18.667q-0.771 0.771-1.896 0.771-1.146 0-1.906-0.76t-0.76-1.906q0-1.125 0.771-1.896l14.125-14.104h-41.563q-1.104 0-1.885-0.781t-0.781-1.885 0.781-1.885 1.885-0.781h41.563l-14.125-14.104q-0.771-0.771-0.771-1.896 0-1.146 0.76-1.906t1.906-0.76z">
</path>
</svg>
</div>
<!-- MAIN CONTENT -->
<div class="container-fluid">
<!-- HEADER -->
<section id="header">
<!-- NAVIGATION -->
<nav class="navbar navbar-fixed-top navbar-default bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#header">Expense Tracker</a>
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-right">
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#contact">Contact</a></li>
<li><a button type="button" class="button button1" href="#info">Login/Signup</button></a>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
<!-- SLIDER -->
<div class="header-slide">
<section>
<div id="loader" class="pageload-overlay" data-opening="M 0,0 0,60 80,60 80,0 z M 80,0 40,30 0,60 40,30 z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60"
preserveAspectRatio="none">
<path d="M 0,0 0,60 80,60 80,0 Z M 80,0 80,60 0,60 0,0 Z" />
</svg>
</div> <!-- /.pageload-overlay -->
<div class="image-slide bg-fixed">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="slider-content">
<h1>Expense Tracker</h1>
<p>Manage your money to get out of debt</p>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="nav-slide">
<a class="prev" href="#prev">
<span class="icon-wrap">
<svg class="icon" width="32" height="32" viewBox="0 0 64 64">
<use xlink:href="#arrow-left">
</svg>
</span>
</a>
<a class="next" href="#next">
<span class="icon-wrap">
<svg class="icon" width="32" height="32" viewBox="0 0 64 64">
<use xlink:href="#arrow-right">
</svg>
</span>
</a>
</nav>
</section>
<script type="text/javascript">
var dataHeader = [
{
bigImage: "images/budget1.png",
},
{
bigImage: "images/budget2.jpg",
},
{
bigImage: "images/income1.png",
}
],
loaderSVG = new SVGLoader(document.getElementById('loader'), { speedIn: 500, speedOut: 500, easingIn: mina.easeinout });
loaderSVG.show()
</script>
</div>
<!-- /.header-slide -->
</section>
<!-- HEADER END -->
<!-- ABOUT -->
<section id="about" class="light">
<header class="title">
<h2>About <span>Us</span></h2>
<p>
Budget your finances to know where your money is going. BudgetTracker is a complete online money management tool designed to keep track of all your expenses and incomes from your computer, mobile phone, or iPad. <br> Use
<strong style="color: red;">Expense Tracker</strong> to track your daily expenses and income.
</p>
</header>
<div class="container">
<div class="row table-row">
<div class="col-sm-6 hidden-xs">
<div class="section-content">
<div class="big-image" style="background-image:url(images/1.png)"></div>
</div>
</div>
<div class="col-sm-6">
<div class="section-content">
<div class="about-content left animated" data-animate="fadeInLeft">
<div class="about-icon"><i class="fa fa-code"></i></div>
<div class="about-detail">
<h4>Clean Code</h4>
<p>CLean code.. Add text</p>
</div>
</div>
<div class="about-content left animated" data-animate="fadeInLeft">
<div class="about-icon"><i class="fa fa-desktop"></i></div>
<div class="about-detail">
<h4>Fully Responsive Website</h4>
<p>fully responsive web.. Add text</p>
</div>
</div>
<div class="about-content left animated" data-animate="fadeInLeft">
<div class="about-icon"><i class="fa fa-cube"></i></div>
<div class="about-detail">
<h4>expense management system</h4>
<p>expense management system.. Add text</p>
</div>
</div>
</div>
</div>
</div> <!-- /.row table-row -->
</div> <!-- /.container -->
</section>
<!-- TEAM -->
<section id="team" class="light">
<header class="title">
<h2><span>Meet The Team</span></h2>
<p>The pynoneers
.. Add text
</p>
</header>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 text-center">
<div class="wrap animated" data-animate="fadeInDown">
<div class="img-team">
<img src="images/team/team-1.png" alt="" class="img-circle">
</div>
<h3>sk</h3>
<h5>fullstack</h5>
<p>WAKANDA FOREVER</p>
<div class="team-social">
<ul class="list-inline social-list">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 text-center">
<div class="wrap animated" data-animate="fadeInDown">
<div class="img-team">
<img src="images/team/team_2.png" alt="" class="img-circle">
</div>
<h3>friend</h3>
<h5>Designer</h5>
<p>WAKANDA FOREVER</p>
<div class="team-social">
<ul class="list-inline social-list">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 text-center">
<div class="wrap animated" data-animate="fadeInDown">
<div class="img-team">
<img src="images/team/team_3.png" alt="" class="img-circle">
</div>
<h3>friend</h3>
<h5>fnd</h5>
<p>WAKANDA FOREVER</p>
<div class="team-social">
<ul class="list-inline social-list">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 text-center">
<div class="wrap animated" data-animate="fadeInDown">
<div class="img-team">
<img src="images/team/team_4.png" alt="" class="img-circle">
</div>
<h3>kdasr</h3>
<h5>asgwr</h5>
<p>WAKANDA FOREVER</p>
<div class="team-social">
<ul class="list-inline social-list">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- /.container -->
</section>
<!-- FOOTER CONTACT -->
<section id="contact" class="dark">
<header class="title">
<h2>Contact <span>Us</span></h2>
<p>if you have any query fell free to contac us.</p>
</header>
<div class="container">
<div class="row">
<div class="col-md-8 animated" data-animate="fadeInLeft">
<form action="#">
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Your Name">
</div>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="Your Email">
</div>
<div class="col-md-12">
<textarea class="form-control" rows="3" placeholder="Tell Us Everything"></textarea>
</div>
<div class="col-md-12">
<button class="btn btn-default submit">Send Message</button>
</div>
</div>
</form>
</div>
<div class="col-md-4 animated" data-animate="fadeInRight">
<address>
<span><i class="fa fa-map-marker fa-lg"></i>kathmandu,nepal </span>
<span><i class="fa fa-phone fa-lg"></i>+1235125125125</span>
<span><i class="fa fa-envelope-o fa-lg"></i> <a
href="mailto:duttabiswajit441@gmail.com">d1231@gmail.com</a></span>
</address>
</div>
</div>
</div>
</section>
<section id="footer">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p>Expense tracker</p>
<p><small><a href="#">expense footer</a></small></p>
</div>
</div>
</div>
</section>
</div><!-- /.container-fluid -->
<!-- SCRIPT -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
非常感谢您抽出时间来帮助我！
您可以使用 iframe 实现此目的。然而，如今我们更喜欢直接图像（也称为繁忙光标），让用户知道某些处理正在进行或等待一段时间。
所以基本上 iframe 将有您的加载器，它会在定义的时间段内显示，然后隐藏，然后显示主页内容。
下面是 index.html.
的代码
<html>
<head>
<title>Expense Tracker</title>
</head>
<body>
<iframe id="loader" src="loader.html" style="width:100%; height:100%; border:0px" ></iframe>
<div id="mainContent" style="display:none"> Main Content goes here. </div>
<script>
setTimeout(function(){
document.getElementById('loader').style.display='none';
document.getElementById('mainContent').style.display='block';
}, 3000);
</script>
</body>
</html>
嗨，我有两个 html 文件 Preloader.html（这是我的预加载器） index.html（这是我的 mainpage/homepage） 现在我的问题是，当我从 preloader.html 加载我的网站时，它会像第一次一样完美地工作，它显示预加载器 5.5 秒然后打开 index.html .. 但即使在这种情况下，如果我重新加载网站index.html 没有加载 preloader.html
但是当我从 index.html 打开我的网站时.. preloader.html 没有显示并且它直接打开 index.html .. 所以我只想问你们，即使我点击 index.html
，我如何加载这个 preloader.html 5 秒？简单来说，我只想加载这个 preloader.html 大约 5.5 秒，然后加载 index.html .. 即使我重新加载侧面，它也应该做同样的事情.. 怎么办？ 这是我的
Preloader.html
<html>
<head>
<title>Expense Tracker</title>
<link rel="stylesheet" type="text/css" href="preload.css">
</head>
<body>
<svg width="910" height="120" id="Layer_1" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M62.8,63.8H28.7v31.6h38v9.5H17.4V17.3h47.3v9.5h-36v27.7h34.1V63.8z" stroke="white" stroke-width="5"/>
<path class="st0" d="M86.3,42l9,13.5c2.3,3.5,4.3,6.8,6.4,10.3h0.4c2.1-3.8,4.2-7,6.2-10.4l8.8-13.4h12.4L108,72.4l22.1,32.5h-13
l-9.2-14.2c-2.5-3.6-4.6-7.2-6.8-10.9h-0.3c-2.1,3.8-4.3,7.1-6.6,10.9l-9.1,14.2H72.5l22.4-32.1L73.5,42H86.3z"stroke="white" stroke-width="5"/>
<path d="M141.1,62.5c0-8.1-0.3-14.6-0.5-20.5h10.3l0.5,10.8h0.3c4.7-7.7,12.1-12.2,22.4-12.2c15.2,0,26.7,12.9,26.7,32
c0,22.6-13.8,33.8-28.6,33.8c-8.3,0-15.6-3.6-19.4-9.9h-0.3v34.2h-11.3V62.5z M152.4,79.3c0,1.7,0.3,3.3,0.5,4.7
c2.1,7.9,9,13.4,17.2,13.4c12.1,0,19.1-9.9,19.1-24.3c0-12.6-6.6-23.4-18.7-23.4c-7.8,0-15.1,5.6-17.3,14.2
c-0.4,1.4-0.8,3.1-0.8,4.7V79.3z" stroke="white" stroke-width="5"/>
<path d="M221.5,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H221.5z M255,67.3
c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H255z" stroke="white" stroke-width="5" />
<path d="M280.2,59c0-6.5-0.1-11.8-0.5-17h10.1l0.7,10.4h0.3c3.1-6,10.4-11.8,20.8-11.8c8.7,0,22.2,5.2,22.2,26.8v37.6
h-11.4V68.6c0-10.1-3.8-18.6-14.6-18.6c-7.5,0-13.4,5.3-15.3,11.7c-0.5,1.4-0.8,3.4-0.8,5.3v37.8h-11.4V59z"stroke="white" stroke-width="5"/>
<path d="M350.8,93.2c3.4,2.2,9.4,4.6,15.1,4.6c8.3,0,12.2-4.2,12.2-9.4c0-5.5-3.3-8.5-11.7-11.6
c-11.3-4-16.6-10.3-16.6-17.8c0-10.1,8.2-18.5,21.7-18.5c6.4,0,12,1.8,15.5,3.9l-2.9,8.3c-2.5-1.6-7-3.6-12.9-3.6
c-6.8,0-10.5,3.9-10.5,8.6c0,5.2,3.8,7.5,12,10.7c10.9,4.2,16.5,9.6,16.5,19c0,11.1-8.6,18.9-23.5,18.9c-6.9,0-13.3-1.7-17.7-4.3
L350.8,93.2z"stroke="white" stroke-width="5"/>
<path d="M410.2,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H410.2z M443.8,67.3
c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H443.8z"stroke="white" stroke-width="5"/>
<path d="M508.3,26.9h-26.7v-9.6h64.9v9.6h-26.8v78h-11.4V26.9z"stroke="white" stroke-width="5"/>
<path d="M550,61.6c0-7.4-0.1-13.8-0.5-19.6h10l0.4,12.4h0.5c2.9-8.5,9.8-13.8,17.4-13.8c1.3,0,2.2,0.1,3.3,0.4v10.8
c-1.2-0.3-2.3-0.4-3.9-0.4c-8.1,0-13.8,6.1-15.3,14.7c-0.3,1.6-0.5,3.4-0.5,5.3v33.5H550V61.6z"stroke="white" stroke-width="5"/>
<path d="M626.7,104.9l-0.9-7.9h-0.4c-3.5,4.9-10.3,9.4-19.2,9.4c-12.7,0-19.2-9-19.2-18.1c0-15.2,13.5-23.5,37.8-23.4
v-1.3c0-5.2-1.4-14.6-14.3-14.6c-5.9,0-12,1.8-16.4,4.7l-2.6-7.5c5.2-3.4,12.7-5.6,20.7-5.6c19.2,0,23.9,13.1,23.9,25.7v23.5
c0,5.5,0.3,10.8,1,15.1H626.7z M625,72.8c-12.5-0.3-26.7,2-26.7,14.2c0,7.4,4.9,10.9,10.8,10.9c8.2,0,13.4-5.2,15.2-10.5
c0.4-1.2,0.7-2.5,0.7-3.6V72.8z"stroke="white" stroke-width="5"/>
<path d="M699.4,102.6c-3,1.6-9.6,3.6-18.1,3.6c-19,0-31.3-12.9-31.3-32.1c0-19.4,13.3-33.4,33.8-33.4
c6.8,0,12.7,1.7,15.9,3.3l-2.6,8.8c-2.7-1.6-7-3-13.3-3c-14.4,0-22.2,10.7-22.2,23.8c0,14.6,9.4,23.5,21.8,23.5
c6.5,0,10.8-1.7,14-3.1L699.4,102.6z"stroke="white" stroke-width="5"/>
<path d="M724.1,70.8h0.3c1.6-2.2,3.8-4.9,5.6-7.2L748.4,42h13.8l-24.3,25.9l27.7,37.1h-13.9l-21.7-30.2l-5.9,6.5v23.7
h-11.3V12.6h11.3V70.8z"stroke="white" stroke-width="5"/>
<path d="M780.1,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H780.1z M813.6,67.3
c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H813.6z"stroke="white" stroke-width="5"/>
<path d="M838.8,61.6c0-7.4-0.1-13.8-0.5-19.6h10l0.4,12.4h0.5c2.9-8.5,9.8-13.8,17.4-13.8c1.3,0,2.2,0.1,3.3,0.4v10.8
c-1.2-0.3-2.3-0.4-3.9-0.4c-8.1,0-13.8,6.1-15.3,14.7c-0.3,1.6-0.5,3.4-0.5,5.3v33.5h-11.3V61.6z"stroke="white" stroke-width="5"/>
</svg>
</body>
<script>
setTimeout(function(){
window.location.href = 'index.html';
}, 6500);
</script>
<script type="text/javascript" src="app.js"></script>
</html
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Expense Tracker</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<style>
.button1 {
color: black;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<div class="svg-wrap">
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-left"
d="M26.667 10.667q1.104 0 1.885 0.781t0.781 1.885q0 1.125-0.792 1.896l-14.104 14.104h41.563q1.104 0 1.885 0.781t0.781 1.885-0.781 1.885-1.885 0.781h-41.563l14.104 14.104q0.792 0.771 0.792 1.896 0 1.104-0.781 1.885t-1.885 0.781q-1.125 0-1.896-0.771l-18.667-18.667q-0.771-0.813-0.771-1.896t0.771-1.896l18.667-18.667q0.792-0.771 1.896-0.771z">
</path>
</svg>
<svg width="64" height="64" viewBox="0 0 64 64">
<path id="arrow-right"
d="M37.333 10.667q1.125 0 1.896 0.771l18.667 18.667q0.771 0.771 0.771 1.896t-0.771 1.896l-18.667 18.667q-0.771 0.771-1.896 0.771-1.146 0-1.906-0.76t-0.76-1.906q0-1.125 0.771-1.896l14.125-14.104h-41.563q-1.104 0-1.885-0.781t-0.781-1.885 0.781-1.885 1.885-0.781h41.563l-14.125-14.104q-0.771-0.771-0.771-1.896 0-1.146 0.76-1.906t1.906-0.76z">
</path>
</svg>
</div>
<!-- MAIN CONTENT -->
<div class="container-fluid">
<!-- HEADER -->
<section id="header">
<!-- NAVIGATION -->
<nav class="navbar navbar-fixed-top navbar-default bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#header">Expense Tracker</a>
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-right">
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#contact">Contact</a></li>
<li><a button type="button" class="button button1" href="#info">Login/Signup</button></a>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
<!-- SLIDER -->
<div class="header-slide">
<section>
<div id="loader" class="pageload-overlay" data-opening="M 0,0 0,60 80,60 80,0 z M 80,0 40,30 0,60 40,30 z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60"
preserveAspectRatio="none">
<path d="M 0,0 0,60 80,60 80,0 Z M 80,0 80,60 0,60 0,0 Z" />
</svg>
</div> <!-- /.pageload-overlay -->
<div class="image-slide bg-fixed">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="slider-content">
<h1>Expense Tracker</h1>
<p>Manage your money to get out of debt</p>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="nav-slide">
<a class="prev" href="#prev">
<span class="icon-wrap">
<svg class="icon" width="32" height="32" viewBox="0 0 64 64">
<use xlink:href="#arrow-left">
</svg>
</span>
</a>
<a class="next" href="#next">
<span class="icon-wrap">
<svg class="icon" width="32" height="32" viewBox="0 0 64 64">
<use xlink:href="#arrow-right">
</svg>
</span>
</a>
</nav>
</section>
<script type="text/javascript">
var dataHeader = [
{
bigImage: "images/budget1.png",
},
{
bigImage: "images/budget2.jpg",
},
{
bigImage: "images/income1.png",
}
],
loaderSVG = new SVGLoader(document.getElementById('loader'), { speedIn: 500, speedOut: 500, easingIn: mina.easeinout });
loaderSVG.show()
</script>
</div>
<!-- /.header-slide -->
</section>
<!-- HEADER END -->
<!-- ABOUT -->
<section id="about" class="light">
<header class="title">
<h2>About <span>Us</span></h2>
<p>
Budget your finances to know where your money is going. BudgetTracker is a complete online money management tool designed to keep track of all your expenses and incomes from your computer, mobile phone, or iPad. <br> Use
<strong style="color: red;">Expense Tracker</strong> to track your daily expenses and income.
</p>
</header>
<div class="container">
<div class="row table-row">
<div class="col-sm-6 hidden-xs">
<div class="section-content">
<div class="big-image" style="background-image:url(images/1.png)"></div>
</div>
</div>
<div class="col-sm-6">
<div class="section-content">
<div class="about-content left animated" data-animate="fadeInLeft">
<div class="about-icon"><i class="fa fa-code"></i></div>
<div class="about-detail">
<h4>Clean Code</h4>
<p>CLean code.. Add text</p>
</div>
</div>
<div class="about-content left animated" data-animate="fadeInLeft">
<div class="about-icon"><i class="fa fa-desktop"></i></div>
<div class="about-detail">
<h4>Fully Responsive Website</h4>
<p>fully responsive web.. Add text</p>
</div>
</div>
<div class="about-content left animated" data-animate="fadeInLeft">
<div class="about-icon"><i class="fa fa-cube"></i></div>
<div class="about-detail">
<h4>expense management system</h4>
<p>expense management system.. Add text</p>
</div>
</div>
</div>
</div>
</div> <!-- /.row table-row -->
</div> <!-- /.container -->
</section>
<!-- TEAM -->
<section id="team" class="light">
<header class="title">
<h2><span>Meet The Team</span></h2>
<p>The pynoneers
.. Add text
</p>
</header>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 text-center">
<div class="wrap animated" data-animate="fadeInDown">
<div class="img-team">
<img src="images/team/team-1.png" alt="" class="img-circle">
</div>
<h3>sk</h3>
<h5>fullstack</h5>
<p>WAKANDA FOREVER</p>
<div class="team-social">
<ul class="list-inline social-list">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 text-center">
<div class="wrap animated" data-animate="fadeInDown">
<div class="img-team">
<img src="images/team/team_2.png" alt="" class="img-circle">
</div>
<h3>friend</h3>
<h5>Designer</h5>
<p>WAKANDA FOREVER</p>
<div class="team-social">
<ul class="list-inline social-list">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 text-center">
<div class="wrap animated" data-animate="fadeInDown">
<div class="img-team">
<img src="images/team/team_3.png" alt="" class="img-circle">
</div>
<h3>friend</h3>
<h5>fnd</h5>
<p>WAKANDA FOREVER</p>
<div class="team-social">
<ul class="list-inline social-list">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 text-center">
<div class="wrap animated" data-animate="fadeInDown">
<div class="img-team">
<img src="images/team/team_4.png" alt="" class="img-circle">
</div>
<h3>kdasr</h3>
<h5>asgwr</h5>
<p>WAKANDA FOREVER</p>
<div class="team-social">
<ul class="list-inline social-list">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- /.container -->
</section>
<!-- FOOTER CONTACT -->
<section id="contact" class="dark">
<header class="title">
<h2>Contact <span>Us</span></h2>
<p>if you have any query fell free to contac us.</p>
</header>
<div class="container">
<div class="row">
<div class="col-md-8 animated" data-animate="fadeInLeft">
<form action="#">
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Your Name">
</div>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="Your Email">
</div>
<div class="col-md-12">
<textarea class="form-control" rows="3" placeholder="Tell Us Everything"></textarea>
</div>
<div class="col-md-12">
<button class="btn btn-default submit">Send Message</button>
</div>
</div>
</form>
</div>
<div class="col-md-4 animated" data-animate="fadeInRight">
<address>
<span><i class="fa fa-map-marker fa-lg"></i>kathmandu,nepal </span>
<span><i class="fa fa-phone fa-lg"></i>+1235125125125</span>
<span><i class="fa fa-envelope-o fa-lg"></i> <a
href="mailto:duttabiswajit441@gmail.com">d1231@gmail.com</a></span>
</address>
</div>
</div>
</div>
</section>
<section id="footer">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p>Expense tracker</p>
<p><small><a href="#">expense footer</a></small></p>
</div>
</div>
</div>
</section>
</div><!-- /.container-fluid -->
<!-- SCRIPT -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
非常感谢您抽出时间来帮助我！
您可以使用 iframe 实现此目的。然而，如今我们更喜欢直接图像（也称为繁忙光标），让用户知道某些处理正在进行或等待一段时间。
所以基本上 iframe 将有您的加载器，它会在定义的时间段内显示，然后隐藏，然后显示主页内容。 下面是 index.html.
的代码<html>
<head>
<title>Expense Tracker</title>
</head>
<body>
<iframe id="loader" src="loader.html" style="width:100%; height:100%; border:0px" ></iframe>
<div id="mainContent" style="display:none"> Main Content goes here. </div>
<script>
setTimeout(function(){
document.getElementById('loader').style.display='none';
document.getElementById('mainContent').style.display='block';
}, 3000);
</script>
</body>
</html>