代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
document.write('<div id="loadbox"& gt;<span>加载中....</span><img src="http://www.funly.cn /img/load.gif" width="160" height="20" /></div>');
window.onload = function () {
document.getElementById('loadbox').style.display="none";
document.getElementById('imglist').style.display="block";
}
</script>
<style type="text/css">
body {background-color:#000;}
#imglist { display:none;color:#FFFFFF;}
#loadbox { width:160px;height:60px; position:absolute;top:50%;left:50%;margin-left:-80px;margin-top:-30px;}
#loadbox span {height:30px;display:block;width:160px;text-align:center; color:#FFF; font-size:12px;}
</style>
</HEAD>
<BODY>
<div id="imglist">
<h1>XXXXX</h1>
<img src="http://ii.a.5d6d.com/userdirs/e/6/realmadrid/attachments/month_0907/09070408514f0af09934c90548.jpg" width="500" height="413" />
<img src="http://www.insun.com.cn/pu/Picture/star/om_m/554798pic321-com-13.jpg" width="800" height="600" />
</div>
</BODY>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
document.write('<div id="loadbox"& gt;<span>加载中....</span><img src="http://www.funly.cn /img/load.gif" width="160" height="20" /></div>');
window.onload = function () {
document.getElementById('loadbox').style.display="none";
document.getElementById('imglist').style.display="block";
}
</script>
<style type="text/css">
body {background-color:#000;}
#imglist { display:none;color:#FFFFFF;}
#loadbox { width:160px;height:60px; position:absolute;top:50%;left:50%;margin-left:-80px;margin-top:-30px;}
#loadbox span {height:30px;display:block;width:160px;text-align:center; color:#FFF; font-size:12px;}
</style>
</HEAD>
<BODY>
<div id="imglist">
<h1>XXXXX</h1>
<img src="http://ii.a.5d6d.com/userdirs/e/6/realmadrid/attachments/month_0907/09070408514f0af09934c90548.jpg" width="500" height="413" />
<img src="http://www.insun.com.cn/pu/Picture/star/om_m/554798pic321-com-13.jpg" width="800" height="600" />
</div>
</BODY>
</html>
效果基本如下：
加载中....
其它的：
代码<html>
<head>
<style type="text/css">
/*Loader
----------------------------------------------*/
#loader_container {
text-align:center;
position:absolute;
top:60%;
width:100%;
left: 0;
}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:11.5px;
color: #abc;
background-color:#000;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:130px;
border:1px solid #abc;
text-align:left;
z-index:2;
}
#loader_bg {background-color: #abc;
position:relative;
top:8px;
left:8px;
height:7px;
width:113px;
font-size:1px}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:0px;
background-color: #fff;
}
</style>
<script type="text/javascript">
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}
</script>
</head>
<body onLoad="remove_loading();">
<div id="loader_container" onclick="this.style.display='none'" title="点击关闭">
<div id="loader">
<div align="center">网页正在载入中 ...</div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>
<img src="http://static.flickr.com/25/57001474_6d174fdce4_o_d.jpg" />
</body>
</html>
<head>
<style type="text/css">
/*Loader
----------------------------------------------*/
#loader_container {
text-align:center;
position:absolute;
top:60%;
width:100%;
left: 0;
}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:11.5px;
color: #abc;
background-color:#000;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:130px;
border:1px solid #abc;
text-align:left;
z-index:2;
}
#loader_bg {background-color: #abc;
position:relative;
top:8px;
left:8px;
height:7px;
width:113px;
font-size:1px}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:0px;
background-color: #fff;
}
</style>
<script type="text/javascript">
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}
</script>
</head>
<body onLoad="remove_loading();">
<div id="loader_container" onclick="this.style.display='none'" title="点击关闭">
<div id="loader">
<div align="center">网页正在载入中 ...</div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>
<img src="http://static.flickr.com/25/57001474_6d174fdce4_o_d.jpg" />
</body>
</html>
效果：
