如何制作网页的Loading效果
作者：闪吧 类型:原创 来源:闪吧
如何制作网页的Loading效果 
解决思路 现在很多网站都用了 Loading 效果，为网页增色不少。不过，在网页中是不可能实现和 Flash 一样的真正的 Loading 效果的，只能模拟或者用近似的方法实现。
具体步骤： ■ 方法一：最简单是做一个加载页，然后在里面插入一个隐藏的iframe，iframe内所加载的地址就是Loading的目标网址，在页面加载完后直接转到目标网址。
代码示例：
<script>
var url="http://www.flash8.net" //要加载的目标页
var text="Loading......" //加载时显示的文字
function window.onload(){
location=url //网页加载后转到目标页
}
//用iframe预载目标页
document.write(text+"<iframe src=\""+url+"\" style=\"display:none\"></iframe>")
</script>
技巧：可将变量 url 的值 http://www.flash8.net 改为你的页面地址。
■ 方法二：也可以直接显示一个加载页面，无任何预载动作。
代码示例：
<div id=demo>Loading...</div>
<script>
var url="http://www.flash8.net" //要加载的目标页
//每500毫秒在id为demo的元素内的文字添加一个 ■
setInterval("demo.innerText+=’■’",500)
setTimeout("location=url",5000) //5000毫秒后转到目标地址
</script>
注意：代码中的 demo 为对象自定义 ID，你可以自行定义，但脚本中的demo必须跟对象的ID一致。
提示：500 为每增加一个“■”相隔的毫秒数，5000 指定5000毫秒(即5秒)后转到目标地址。
■ 方法三：从方法二中加一个颜色渐变的效果。
<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的元素内的文字添加一个 ■
//设置id为demo的元素的文字颜色向白色渐变
demo.style.color="rgb("+[i,i,i].join(",")+")"
setTimeout("load()",500) //500毫秒后再次执行load()函数
}
else setTimeout("location=url",1000) //1秒后转到目标页
}
load() //运行 load 函数
</script>
■ 方法四：先设置文档为不可见，通过定时自加，不断改变状态栏的显示，以模拟下载进度效果，在页面加载完成后，重新设置定时器和变量num，使之更真实，在变量num自加到100后让文档显示并在状态栏显示"complete"。
代码示例：
<script>
//变量num相当于下载百分比，delay的值为改变状态栏信息的毫秒数
var num=0,delay=300
function window.onload(){ //页面加载完成后执行以下表达式
num = 90 //在页面加载完成不管num已自加到多少
delay = 5
}
function loadState(){
if(num < 100){ //变量num小于100
num++ //num自加
//状态栏显示num的相关字符
window.status = "loaded:"+num+"% "+new Array(num).join("|")
//delay毫秒后再次执行loadState()函数
setTimeout("loadState()",delay)
}
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)">
特别提示
四种方法都没有实现真正的 Loading，只是模拟一个下载进度，到“进度”为100%时再跳转到目标页，或者先用 iframe 预载，加载完成后转到目标页。代码可以直接运行，效果分别如图 3.4、3.5、3.6、3.7 所示。
图 3.4 方法一的Loadign效果预览
图 3.5 方法二的Loadign效果预览
图 3.6 方法三的Loadign效果预览
图 3.7 方法四的Loadign效果预览
特别说明
本例中使用了对象的 innerText 属性来设置或获取对象内的文本内容，location 对象的默认属性 href 来跳转页面，window. 对象的status 属性来设置或获取页面状态栏的文本内容，style 对象的 color 属性来设置对象内的文本颜色，setInterval 和setTimeout 方法来设置计时器。Object.innerText设置或获取位于对象起始和结束标签内的文本。
1. location.href设置或获取整个 URL 为字符串，location 的默认属性为 href，所以可简写为location。
2. window.status设置或获取位于窗口底部状态栏的信息。
3. Object.style.color设置或获取对象文本的颜色。
4. 有关setInterval 和 setTimeout 的说明和区别请参考本部分问题26。
责任编辑:kissall 时间:2005年8月29日
- 最近更新