主题:  loading 怎么写的?

handylee_5d

职务:普通成员
等级:1
金币:0.0
发贴:70
注册:2004/3/4 20:13:40
#12004/4/11 10:23:09
记得几年前flash还没有今天这么流行的时候,我在某些网站上看到了loading,现在很少见了现在很想知道如何编写的是javascript吗? 高手指点一下,谢谢啦.



我佛山人

职务:版主
等级:4
金币:16.0
发贴:2269
注册:2002/8/7 15:09:27
#22004/4/11 13:09:46
在网页中是不可能实现和Flash一样的真正的Loading效果的,只能模拟或者用近似的方法实现。
1.最简单是做一个加载页,然后在里面插入一个隐藏的iframe,iframe内所加载的地址就是Loading的目标网址,在页面加载完后直接转到目标网址。
代码示例:
<script>
var url="http://www.flash8.net"		   //要加载的目标页
var text="Loading......"			   //加载时显示的文字
function window.onload(){
location=url					   //网页加载后转到目标页
} 
document.write(text+"<iframe src=\""+url+"\" style=\"display:none\"></iframe>")  //用iframe预载目标页
</script>


2.也可以直接显示一个加载页面,无任何预载动作。
代码示例:
<div id=demo>Loading...</div>
<script>
var url="http://www.flash8.net"		 //要加载的目标页
setInterval("demo.innerText+='■'",500) //每500毫秒在id为demo的元素内的文字添加一个 ■
setTimeout("location=url",5000)		 //5000毫秒后转到目标地址
</script>

3.从2中加一个颜色渐变的效果
<div id=demo style="color:#494949">Loading...</div>
<script>
var i=69
var url="http://www.flash8.net"		//要加载的目标页
function load(){
if(i<249){
   i+=10
   demo.innerText+="■"			//每500毫秒在id为demo的元素内的文字添加一个 ■
   demo.style.color="rgb("+[i,i,i].join(",")+")"	//设置id为demo的元素的文字颜色向白色渐变
   setTimeout("load()",500)				//500毫秒后再次执行load()函数
 }
else setTimeout("location=url",1000)		//1秒后转到目标页
}
load()							//运行load()函数
</script>

4.先设置文档为不可见,通过定时自加,不断改变状态栏的显示,以模拟下载进度效果,在页面加载完成后,重新设置定时器和变量num,使之更真实,在变量num自加到100后让文档显示并在状态栏显示"complete"
代码示例:
<script> 
var num=0,delay=300		 	    //变量num相当于下载百分比,delay的值为改变状态栏信息的毫秒数
function window.onload(){ 		    //页面加载完成后执行以下表达式
  num   = 90				    //在页面加载完成不管num已自加到多少
  delay = 5
} 
function loadState(){ 
  if(num < 100){				   //变量num小于100
    num++ 					   //num自加
    window.status = "loaded:"+num+"% "+new Array(num).join("|") 	 //状态栏显示num的相关字符
    setTimeout("loadState()",delay)  //delay毫秒后再次执行loadState()函数
  } 
  else {					  //如果num等于100,即认为页面加载完成
    window.status = "complete" 	  //状态栏显示"complete" 
    with(document.body){		  //用blendTrans滤镜渐显文档
    filters.blendTrans.apply()		 
    style.display = "" 
    filters.blendTrans.play()
    }
  } 
} 
loadState() 
</script>
<body style="display:none;filter:blendTrans(duration=1)">



handylee_5d

职务:普通成员
等级:1
金币:0.0
发贴:70
注册:2004/3/4 20:13:40
#32004/4/13 13:01:28
非常感谢!