在网页中是不可能实现和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)">