页面 Loading 条基本人人都会用。它的原理很简单：在页头放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。
上图展示了传统 Wordpress 模板在浏览器中的载入顺序，Loading 条的出现和消失分布于头尾。
如果我们在页面的不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果，其完全可以与浏览器自带的状态条媲美。
先来看一个演示：地址。
要得到演示上的进度条效果，首先，引入 jQuery 框架(一定要放在页头
<head> 标签内)。然后在 <body> 标签起始位置放置：
<div id="loading"><div></div></div>
CSS 可以这么写：
#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}
准备工作到这里就做好了。
接着，请随意发挥，依照你对图二的理解，在模板各个部分的适当位置放置：
<script type="text/javascript">
$("#loading div").animate({width:"16px"})
</script>
其中红色数值应该随载入顺序逐步增加，直到 footer.php。另外别忘了在 footer.php 最末尾放上：
<script type="text/javascript">
$("#loading").fadeOut()
</script>
用于载入完毕后隐藏进度条。
分享到：
相关推荐
页面载入进度条作为一个实用的功能，它能够提升用户在等待页面加载时的体验，通过显示加载进度，让用户了解页面的加载状态，从而减少用户的焦虑感。本教程将深入探讨如何实现这样一个实用的页面载入进度条。 首先，...
一个简单的页面载入进度条
**jQuery页面载入进度条**是一种用户界面设计技术，它为用户提供可视化的反馈，表明网页内容正在加载。这种效果能够显著提升用户体验，因为用户在等待页面完全加载时能明确感知到进度，而不是面对一片空白。在本文中...
为了解决这一问题，我们可以采用jQuery来创建一个页面载入进度条，以此来显示页面加载的进度，增强用户体验。"jQuery 页面载入进度条实现代码"这个主题就是关于如何使用jQuery和CSS来构建这样一个功能。 首先，为了...
VB载入进度条是Visual Basic（VB）编程中一种常见的用户界面元素，它用于向用户提供程序执行过程中的反馈，特别是当处理大型数据或执行长时间任务时。VB载入进度条通常显示为一条横线，随着时间的推移逐渐填充，让...
"仿微信网页加载进度条"是一种模拟微信应用中加载页面时显示的进度指示器，它通常用于显示网页或内容加载的进度，给用户一个可视化的等待反馈，减少用户的焦虑感。在本文中，我们将深入探讨如何实现这样的功能，并...
在IT界，用户体验是至关重要的一个环节，而进度条、载入指示器和Loading动画则是提升用户体验的关键元素。这些元素通常出现在数据加载、文件传输、网页刷新等场景中，为用户展示程序运行的状态，减少用户的等待焦虑...
在这个例子中，我们将探讨如何使用`DJMeter.ocx`来实现VB载入进度条。 首先，我们需要理解什么是ActiveX控件。ActiveX是微软开发的一种技术，允许开发者创建可重用的组件，这些组件可以在多种支持ActiveX的环境中...
《jQuery进度条载入特效详解》 在网页开发中，用户界面的交互体验至关重要，而进度条载入特效就是提升用户体验的一种有效手段。它能够实时显示任务的完成进度，让用户了解操作状态，增加等待的可预测性，从而降低...
在网页设计中，用户体验是至关重要的一个环节，而页面载入缓冲效果就是提升用户体验的一种巧妙方式。当用户点击链接或提交表单时，他们通常希望看到的不是枯燥无味的空白页面，而是有一个动态的、视觉上吸引人的加载...
标题中的“一个详细的VB载入进度条”指的是在Visual Basic（VB）编程环境中创建的一个能够显示加载进度的用户界面元素，通常称为进度条。在软件开发中，进度条是提高用户体验的重要工具，它能告知用户程序执行的进度...
### JS 页面载入等待特效知识点解析 在网页开发过程中，加载动画或提示信息常常被用来提升用户体验，尤其是在页面加载时间较长的情况下。通过合理的加载提示，可以让用户感到网站的专业性和友好性，减少用户的焦虑...
在本文中，我们将深入探讨如何使用JavaScript和HTML5的Canvas API来创建一个简单的加载条（进度条）功能。Canvas是一个强大的图形绘制工具，它允许开发者在网页上动态地绘制2D图形。以下是如何利用这些技术实现加载...
理解DOM事件，创建加载动画，实现进度条，以及运用延迟加载和资源优化策略，都是提升页面载入等待代码效率的有效途径。在实际项目中，根据具体需求和场景选择合适的方法，结合前端性能最佳实践，能够为用户提供更...
在Web开发中，尤其在处理大量异步加载时，这种工具非常有用，因为它可以有效地管理加载顺序，防止阻塞页面渲染，同时还能通过进度条展示加载状态，让用户了解当前的加载进度。 **一、基础原理** 1. **Ajax技术**：...
在制作进度条特效时，jQuery提供了方便的API来操作DOM（文档对象模型）元素，控制页面动态效果。 1. 包含jQuery库：首先需要在HTML文件中引入jQuery库。通常，我们可以从CDN（内容分发网络）获取最新的jQuery版本，...
本项目提供了一套完整的Ajax页面载入等待特效解决方案，包括演示、调用方法以及实际效果展示。 首先，我们来理解Ajax的工作原理。当用户触发一个Ajax请求时，JavaScript代码会创建一个新的XMLHttpRequest对象，通过...
在这个“jquery进度条载入特效.zip”压缩包中，包含的是一种使用jQuery实现的进度条加载效果，这在网页加载、数据处理或上传下载场景中常见，可以提升用户体验。 首先，我们要理解进度条的基本概念。进度条是一种UI...