如何制作网页的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。
详情请查考:http://hi.baidu.com/eagle092/blog/item/dee58a08470cf839e824886d.html
相关推荐
"css3 svg制作网页loading动画图标代码"这个主题正是关于如何使用CSS3和SVG（Scalable Vector Graphics）技术来创建动态、吸引人的加载图标。下面将详细介绍这两个技术以及它们在创建网页加载动画中的应用。 **CSS3...
在这个特定的资源中，我们关注的是"Bootstrap网页loading加载图标动画特效"，这是一种利用Bootstrap框架和CSS3技术来创建吸引用户注意力的加载指示器的方法。 首先，加载图标（Loading Icon）在网页设计中扮演着至...
3. **Loading效果**: Loading效果通常是在网页内容加载时显示的动画，以告知用户页面正在加载并提供视觉反馈。这些效果可以通过纯CSS实现，也可以结合JavaScript来控制。在本项目中，可能包含了多种不同风格和样式的...
在前端开发中，"loading效果"是用户交互过程中的一个重要组成部分。它通常指的是网页或应用在加载内容时显示的一种动画效果，旨在告知用户系统正在处理数据，提高用户体验，避免用户因等待而产生的不耐烦。CSS...
本篇文章将深入探讨如何使用CSS3创建富有吸引力的网页Loading效果。 首先，我们要理解CSS3的关键特性，如选择器、盒模型、边框与背景、文本样式、转换（Transforms）、动画（Animations）以及过渡（Transitions）。...
在网页设计中，加载效果（通常称为“页面loading效果”）是用户体验的重要组成部分。当用户访问一个网站或应用时，加载过程可能需要时间，而一个精心设计的loading动画可以缓解用户的等待焦虑，同时提升品牌形象。本...
在网页设计中，用户体验是至关重要的一个环节，而页面加载的Loading效果就是提升用户体验的一种方式。Loading效果，也称为加载动画或预加载器，通常在网页内容还未完全加载完成时显示，以告知用户页面正在努力加载，...
在网页设计中，"加载"（loading）是一个关键的用户体验元素，特别是在内容丰富的网页或需要时间来完全加载的页面上。加载gif图片是为用户提供视觉反馈的一种常见方式，表明页面内容正在加载，让用户知道他们需要等待...
本文将深入探讨如何利用CSS3的animation属性制作出超酷的网页Loading加载进度条动画效果。 首先，我们需要了解CSS3的animation属性。CSS3的animation属性是一组属性的简写形式，包括`animation-name`、`animation-...
"CSS等待遮罩loading效果（多个）"是一个集合，包含了多个不同的CSS实现的加载动画，旨在为用户提供美观且不单调的加载界面。 CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括如SVG、Math...
网页动态加载（loading）GIF图标是网页设计中常见的元素，用于表示页面内容正在加载或处理中，给予用户一种交互反馈，提升用户体验。GIF是一种支持动画格式的图像文件，常用于创建简单、循环的动画效果，如旋转的...
在本资源中，我们主要探讨的是如何利用纯CSS3技术来创建一个科技感十足的背景发光渐变网页Loading加载动画特效。CSS3是现代网页设计的重要组成部分，它提供了丰富的样式和动画功能，使得开发者能够无需JavaScript或...
ExtJS的loading效果是指当数据正在后台加载或页面正在处理时，显示的一种视觉提示，告知用户系统正在进行工作。这通常是一个旋转的指示器或文字提示，如“正在加载...”。这种效果可以避免用户在等待过程中感到迷茫...
总结来说，原生CSS的loading遮罩层效果是一种高效且优雅的网页交互设计技术，它通过CSS的动画和布局特性，实现动态的加载指示器和遮罩层，提高了用户在等待页面加载过程中的体验。理解和掌握这一技术，对于任何前端...
在网页设计中，图片预加载是一项重要的技术，用于优化用户体验，特别是当页面...综上所述，图片预加载和Loading效果是提升网页性能和用户体验的有效手段。通过合理的编程和设计，可以创建出既美观又实用的预加载方案。
在本文中，我们将深入探讨如何使用纯CSS3技术来创建一个引人注目的渐进点点Loading效果。这种效果在网页加载或者数据处理时非常常见，可以为用户提供一种视觉反馈，让他们知道系统正在忙碌并即将完成任务。我们将...
2. **Loading效果**：加载效果是指在内容完全加载之前，展示给用户的一个视觉反馈，让用户知道程序正在运行并即将完成加载。这些效果可以是简单的进度条，也可以是复杂的动画，目的是提高用户体验，减少用户的等待...
在网页设计中，loading效果通常是指在页面内容完全加载之前展示的一个动画或指示器，它告知用户页面正在加载，提高了用户体验，避免用户因长时间等待而产生不耐烦。这种纯脚本的实现方式意味着不依赖于CSS3动画或...
制作Flash网页加载（Loading）主要有以下几个步骤： 1. **创建Flash文档**：在Flash环境中，设计师会创建一个新的Flash文档，设置舞台大小、帧率和背景色等基本属性，为Loading界面打下基础。 2. **设计加载动画**...