use*_*171 26 html javascript css loading pageload
我正在一个包含大量mp3和图像的网站上工作,我想在所有内容加载时显示加载gif.
我不知道如何实现这一点,但我确实有我想要使用的动画GIF.
有什么建议？
mma*_*tax 27
通常是通过ajax加载内容并监听readystatechanged事件以使用加载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库可以让你的生活更轻松,但上面的确是你所需要的.
小智 8
你说你不想在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事件不会触发.因此,<DIV>在页面加载完成之前,不会显示第2层,之后将启动onload.
用 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 和任何你想要的文本，一旦页面加载它就会淡出。
小智 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>这是在所有其他代码之后的底部（/html 标签除外）
<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>这对我来说总是 100% 有效
| 归档时间： |
|
| 查看次数： |
148803 次 |
| 最近记录： |