我首先想告诉大家，我对网页设计非常陌生，所以我正在尝试，我真的想学习如何在页面加载之前用gif创建预加载器。我尝试过，但每次都要不断显示预加载器而不是实际网站，或者根本不显示预加载器。我不确定我是不是下载了某些东西，或者我使用的程序是记事本++，但我不知道我做错了什么。我按照每个例子来做，但没有任何作用。这是我的html文件
<html>
<head>
<meta charset = "uft-8">
<title>Tester</title>
<link href =" test.css" type = "text/css" rel = "stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type = "text/javascript"></script>
<script>
$(document).ready(function() {
$(window).load(function() {
preloaderFadeOutTime = 500;
function hidepreloader() {
var preloader = $('.tester');
preloader.fadeOut(preloaderFadeOutTime);
}
hidepreloader();
});
});
</script>
</head>
<body>
<div class = "tester"></div>
<div class = "overlay"></div>
</div>
<div class = "wrapper">
<div class = "heading">
<h1> My page</h1>
</div>
<div class = "navigation">navigation</div>
<div class = " content">main content</div>
<div class = "sidebar">addition</div>
<div class = "footer">this is an experiment</div>
</div>
</body>
</html>
这是我的CSS文件
#tester {
height: 100%;
width: 100%;
background: rgba(0,0,0,.8);
position: fixed;
left: 0;
top: 0;
}
#overlay {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../downloads/Giphy.gif) 50% 50% no-repeat rgb(249,249,249);
}
.wrapper {
background: #000000;
width: 600px;
margin: 0 auto 0 auto;
}
.heading {
height: 100px;
background: green;
text-align:center;
padding: 20px;
}
.navigation {
height: 50px;
background: lightgreen;
}
.content {
min-height: 400px;
background-image: url(../downloads/test.jpg);
width: 400px;
float: left;
}
.sidebar {
width: 200px;
float: right;
background:lightblue;
min-height: 400px;
}
.footer {
clear: both;
background: black;
height: 40px;
color: white;
text-align: center;
padding: 10px;
}
h1 {
text-align: center;
font-family: "times new roman"
font: 24pt;
color: #ff3819;
}
答案 0 :(得分：1)
您可以在HTML背景中设置下载程序gif，并在页面未完全加载时隐藏正文：
css
body {
opacity:0;
transition:0.5s;
}
的JavaScript
window.onload= function() {
document.body.style.opacity="1"// opacity allows transition
}
示例切换显示
window.onload= function() {
document.body.style.display="block"
}html {
height:100%;
background:url(https://www.engagewp.com/wp-content/uploads/2014/06/preloader.gif) center no-repeat;
}
img {
max-width:100%;
}
body {
background:white;
display:none;
}<h1>HTML Ipsum Presents</h1>
let-s use some big image
<img src="http://lorempixel.com/1200/1500"/>
<img src="http://lorempixel.com/1200/1501"/>
<img src="http://lorempixel.com/1200/1502"/>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<img src="http://lorempixel.com/1200/1503"/>
<img src="http://lorempixel.com/1200/1504"/>
<img src="http://lorempixel.com/1200/1505"/>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
或切换内容淡化的不透明度
window.onload= function() {
document.body.style.opacity="1"
}html {
height:100%;
background:url(https://www.engagewp.com/wp-content/uploads/2014/06/preloader.gif) center no-repeat;
}
img {
max-width:100%;
}
body {
background:white;
opacity:0;
transition:0.5s
}<h1>HTML Ipsum Presents</h1>
let-s use some big image
<img src="http://lorempixel.com/1200/1500"/>
<img src="http://lorempixel.com/1200/1501"/>
<img src="http://lorempixel.com/1200/1502"/>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<img src="http://lorempixel.com/1200/1503"/>
<img src="http://lorempixel.com/1200/1504"/>
<img src="http://lorempixel.com/1200/1505"/>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
答案 1 :(得分：0)
基本上你的html和css乍一看看起来很好。如果删除Javascript，预加载器是否按预期显示？如果是这样，那就是JS问题。
您的<script>标记出现在<head>中，因此在定义预加载器的任何标记之前，但由于您正在等待$(document).ready()，这应该不是问题。但AFAIK是在DOM准备就绪时触发的，这并不意味着所有图像和资产也会被下载。在这种情况下，$(window).on('load', function () { … })可能会更好。
可能出现的另一种情况是：页面加载速度太快，以至于您可能实际上看不到预加载器，因为它会立即被隐藏«。所以为了确保，你可以设置一个Timeout来延迟它，如下所示：
$(document).ready(function () {
setTimeout(function () {
hidePreloader();
}, 1000); //wait a second
});
或者，你可以做的另一件事，而不是超时，是使用chrome开发人员工具，并在网络选项卡中设置网络限制，这样你可以更好地感受下载时页面的外观很多带宽。我想，你在浏览器中使用的是本地主机，或者只是普通的file:///，加载速度非常快。但是，如果您告诉浏览器在加载所有内容后立即隐藏预加载器，隐藏预加载器，并且页面上只有一个预加载器，只要它在可见时就会被隐藏。
答案 2 :(得分：0)
我建议你：
$(document).load(fn) - 正如你所做的那样所以，做到这一点的共鸣就是那种“预装”图像，对于装载者来说，你想要更少的延迟。
要转换，您可以使用在线base64转换器例如。 http://www.askapache.com/online-tools/base64-image-converter/
要实施，您可以像这篇文章How to display Base64 images in HTML?
那样实施它<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
您也可以将其实现为CSS - （不推荐用于加载程序）
li {
background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
no-repeat
left center;
padding: 5px 0 5px 25px;
}
来源：https://css-tricks.com/data-uris/
使用jQuery(window).load作为页面
$( "#book" ).load(function() {
// Handler for .load() called.
});
此帖子中提出了ready和load之间的差异：Detect if page has finished loading
DOMContentLoaded：当DOM准备好被操作时。 jQuery的 捕获此事件的方法是使用jQuery（document）.ready（function（） {}）;
OnLoad：当DOM准备好并且所有资产 - 包括图像时， iframe，字体等 - 已加载和纺车/小时 班级消失了。 jQuery捕获此事件的方法如上所述 提到了jQuery（window）.load。