我正在处理一个包含许多MP3和图片的网站，希望在所有内容加载时显示加载gif动画。
我不知道如何实现这一点，但我有想要使用的动画gif图像。
有什么建议吗？
7个回答
30
通常，通过使用Ajax加载内容并侦听readystatechanged事件以使用loading GIF或内容更新DOM的网站执行此操作。
您目前是如何加载内容的？
代码类似于以下内容：
function load(url) {
// display loading image here...
document.getElementById('loadingImg').visible = true;
// request your data...
var req = new XMLHttpRequest();
req.open("POST", url, true);
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
// content is loaded...hide the gif and display the content...
if (req.responseText) {
document.getElementById('content').innerHTML = req.responseText;
document.getElementById('loadingImg').visible = false;
}
}
};
request.send(vars);
}
有很多第三方JavaScript库可以让您的生活更轻松，但以上内容确实是您所需的全部。
- mmattax
1
请问您能告诉我哪些第三方库吗？ - Shekhar
12
您说您不想使用 AJAX 来完成这个任务。虽然 AJAX 很适合这个任务，但是有一种方法可以在等待整个 <body> 加载时显示一个 DIV。 大致操作如下：
<html>
<head>
<style media="screen" type="text/css">
.layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; }
.layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden }
</style>
<script>
function downLoad(){
if (document.all){
document.all["layer1"].style.visibility="hidden";
document.all["layer2"].style.visibility="visible";
} else if (document.getElementById){
node = document.getElementById("layer1").style.visibility='hidden';
node = document.getElementById("layer2").style.visibility='visible';
}
}
</script>
</head>
<body onload="downLoad()">
<div id="layer1" class="layer1_class">
<table width="100%">
<tr>
<td align="center"><strong><em>Please wait while this page is loading...</em></strong></p></td>
</tr>
</table>
</div>
<div id="layer2" class="layer2_class">
<script type="text/javascript">
alert('Just holding things up here. While you are reading this, the body of the page is not loading and the onload event is being delayed');
</script>
Final content.
</div>
</body>
</html>
直到整个页面加载完成，onload事件才会触发。因此，在页面加载完成之前，layer2的<DIV>不会显示，加载完成后将触发onload事件。
- Mike E.
2
1这种方法实际上非常有效，而且在我看来，最好避免为那些可以使用最大浏览器兼容性轻松完成的事情加载特殊库。我做类似的事情，但通常将我的加载内容样式设置为“display:block”，然后在所有其他“onload”任务完成时，将其样式切换为“display:none”。这样，我可以添加加载内容，而无需改变原始页面的样式。我想display:none意味着它不适用于IE < 8，但总是有解决办法的。 :-) - Randy
尝试了这个。虽然加载器运行良好，但现在屏幕和内容被一个不太透明的黑色框覆盖。现在怎么办？ - eqrakhattak
6
使用jQuery呢？一个简单的例子如下：
$(window).load(function() { //Do the code in the {}s when the window has loaded
$("#loader").fadeOut("fast"); //Fade out the #loader div
});
而HTML...
<div id="loader"></div>
还有CSS...
#loader {
width: 100%;
height: 100%;
background-color: white;
margin: 0;
}
在你的加载器 div 中，你需要放置GIF图和其他想要展示的文本内容，在页面加载完成后它会自动淡出。
- joe_young
5
#纯 CSS 方法
将此代码放在您的代码顶部（在头标签之前）。
<style> .loader {
position: fixed;
background-color: #FFF;
opacity: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 10;
}
</style><div class="loader">
Your Content For Load Screen
</div><style>
.loader {
-webkit-animation: load-out 1s;
animation: load-out 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes load-out {
from {
top: 0;
opacity: 1;
}
to {
top: 100%;
opacity: 0;
}
}
@keyframes load-out {
from {
top: 0;
opacity: 1;
}
to {
top: 100%;
opacity: 0;
}
}
</style>- MindCraftMagic
1
非常好，而且非常简单。谢谢！ - raddevus
2
首先，在一个 div 中设置一个加载图片。接下来，获取该 div 元素。然后，设置一个编辑 css 的函数，将可见性设置为“隐藏”。现在，在 <body> 中，将 onload 属性设置为该函数的名称。
- Peach
1
可以用一点代码来展示。 - eqrakhattak
1
实际上，有一种相当简单的方法来做到这一点。代码应该是这样的：
<script type="test/javascript">
function showcontent(x){
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 1) {
document.getElementById('content').innerHTML = "<img src='loading.gif' />";
}
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('content').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('POST', x+'.html', true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(null);
}
而在HTML中：
<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>
我在我的页面上做了类似的事情，它运行得很好。
- Johnz
0
在HTML5中，您可以使用<progress>元素。请查看此页面以获取源代码和实时演示。http://purpledesign.in/blog/super-cool-loading-bar-html5/
这里是进度元素...
<progress id="progressbar" value="20" max="100"></progress>
这将从20开始具有加载值。当然，仅元素是不够的。您需要在脚本加载时移动它。为此，我们需要JQuery。这是一个简单的JQuery脚本，从0到100开始进度，并在定义的时间段内执行某些操作。
<script>
$(document).ready(function() {
if(!Modernizr.meter){
alert('Sorry your brower does not support HTML5 progress bar');
} else {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (1000/max)*10,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate);
//Do Something
}
if (value == 16) {
//Do something
}
if (value == 38) {
//Do something
}
if (value == 55) {
//Do something
}
if (value == 72) {
//Do something
}
if (value == 1) {
//Do something
}
if (value == 86) {
//Do something
}
};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>
将此代码添加到您的HTML文件中。
<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
<progress id="progressbar" value="0" max="100"></progress>
<span class="progress-value">0%</span>
</div>
</div>
希望这能给你一个开始。
- Raj Nandan Sharma
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接