页面载入进度条

第一种：

<!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>Loading Status Bar</title>
<meta name="robots" content="noindex,follow" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
document.writeln("<style type=\"text\/css\">#loading{width:100px;height:20px;background:#A0DB0E;padding:5px;position:fixed;left:0;top:0}#loading div{width:1px;height:20px;background:#F1FF4D;font:10px/20px Arial}<\/style>");
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<noscript>您的浏览器不支持 Javascript</noscript>

<div ).hide(500)},3000)</script>

</body>
</html>

第二种——导向型

<!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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Loading</title>
<style type="text/css">
.proccess{
border:1px solid;
width:8px;
height:8px;
background:#ffffff;
margin:3px;
}
</style>

<script language="JavaScript">
var url = 'http://deographics.com/';
</script>

</head>

<body  onLoad="location.href = url;" style='overflow:hidden; overflow-y:hidden'>
<div align=center>
<font class="fontbig">友情提示，页面正在加载中，请等待......</font>
<div align="center">
<form method="post" name="proccess">
<script type="text/javascript">
for(i=0;i<30;i++){
document.write("<input class="proccess">");
}
</script>
</form>
</div>

<div align="center">
<script language=JavaScript>
var p=0,j=0;
var c=new Array('lightskyblue','white')
setInterval('proccess();',100)
function proccess(){
document.forms.proccess.elements[p].style.background=c[j]; p+=1;
if(p==30){ p=0;j=1-j; }
}
</script>
</div>
</div>

<div align="center">
<script>
if (document.layers){
document.write('<Layer src="' + url + ' " visibility="hide"> </Layer>');
}else if (document.all || document.getElementById){
document.write('<iframe src="' + url + '" style="visibility: hidden;"></iframe>');
}else{
location.href = url;
}
</script>
</div>
</body>
</html>

第3种—— iframe loading

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Iframe Loading</title>
</head>

<body>
<div ;
</script>
</body>
</html>

第四种—— 加载图片

<html>
<head>
<title>JavaScript图片预加载代码，显示 loading</title>

<style type="text/css">
div{
border:#aaaaaa 3px solid;
width:200px;
padding:2px;
margin:2px 9px;
font-size:12px;
line-height:22px;
color:#999999;
}

.ipt1{
width:160px;
font-size:12px;
color:#1F6478;
border:#999999 1px solid;
margin-left:9px;
}

.ipt2{
border:#999999 1px solid;
margin-left:6px;color:#666666；
}

p{
margin:0px;
padding:0px;
background-image:url( 页面载入进度条

);
background-position:center;
background-repeat:no-repeat;
width:200px;
height:200px;
text-align:center;
font-size:12px;
color:#999999;
line-height:26px;
}
</style>

<script language="javascript" type="text/javascript">
function preloadimg(url,obj,ipt){
var img = new Image();
obj.innerHTML = "<p>Loading...</p>";
img.onload = function(){
obj.innerHTML = "";
obj.style.width = String(img.width)+"px";
ipt.style.width = String(img.width-40)+"px";
obj.appendChild(img);
};

img.onerror = function(){
obj.innerHTML="Loading Fail !"
};

img.src = url; //img.src 一定要写在img.onload之后，否则在IE中会出现问题
}

function show(){
var div = document.getElementsByTagName("div")[0];
var input = document.getElementsByTagName("input");

preloadimg("http://www.codefans.net/jscss/demoimg/wall9.jpg",div,input[0]);
input[0].onclick = function(){this.value=""};
input[1].onclick = function(){preloadimg(input[0].value,div,input[0]);}
}
window.onload = show;
</script>

</head>

<body>
<div></div><br />
<input type="text" value="将图片地址粘贴在这里" class="ipt1"/><input type="button" value="开始加载" class="ipt2"/>
</body>
</html>