`
ruvuoai
  • 浏览: 95904 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jquery页面加载进度条

jQueryWordPressJavaScriptPHP浏览器 
阅读更多

页面 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>


用于载入完毕后隐藏进度条。

 

分享到：
| 如何使得执行scp命令时不需要输入用户密码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery动态页面加载进度条

    "jquery动态页面加载进度条"就是一种优化用户体验的工具，它通过在页面加载过程中展示一个直观的进度条，让用户知道页面正在加载并估计加载完成的时间，从而减少用户的等待焦虑感。这个插件基于JavaScript库jQuery...

    jQuery滑动加载进度条代码.zip

    本资源"jQuery滑动加载进度条代码.zip"提供了一个实现动态进度条加载特效的代码实例，特别适用于网页加载过程中显示进度，提升用户体验。 首先，进度条在网页应用中扮演着重要角色，它可以让用户了解当前操作的进度...

    jQuery模拟页面加载进度条

    本教程将详细讲解如何使用jQuery库来模拟页面加载进度条。 首先，jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery的易用性和丰富的功能使其成为创建动态网页的强大...

    利用Ajax+Jquery实现异步进度条效果

    "利用Ajax+Jquery实现异步进度条效果"这个主题正是围绕这一目标展开，它涉及到C#后端开发、.NET框架、Ajax技术以及Jquery库的前端应用。下面将详细阐述这些知识点。 首先，C#是一种面向对象的编程语言，广泛应用于...

    jQuery网站页面加载进度条.zip

    为了提升用户体验，开发者经常采用一种叫做“页面加载进度条”的技术，这正是"jQuery网站页面加载进度条.zip"这个压缩包所包含的内容。这个项目利用了前端技术，包括CSS、JavaScript、HTML5以及jQuery库，来创建一个...

    jQuery数据加载进度条代码.zip

    这个版本的jQuery对现代浏览器有很好的支持，并且文件大小经过压缩，可以减少页面加载时间。 四种进度条特效可能包括线性渐进、填充式动画、圆形旋转等常见的视觉效果，这些效果可以通过CSS3动画或者jQuery自定义...

    页面加载进度条

    页面加载进度条是一种常见的用户体验设计元素，特别是在网页和应用程序中，它向用户显示了页面内容正在加载的过程。这种视觉反馈可以提升用户体验，因为用户能够清楚地看到页面正在逐步加载，而不是面对一片空白屏幕...

    jQuery 页面载入进度条 (必有一款适合你----综合搜集版)

    **jQuery页面载入进度条**是一种用户界面设计技术，它为用户提供可视化的反馈，表明网页内容正在加载。这种效果能够显著提升用户体验，因为用户在等待页面完全加载时能明确感知到进度，而不是面对一片空白。在本文中...

    jquery css3进度条加载动画特效

    标题中的“jQuery CSS3进度条加载动画特效”指的是利用JavaScript库jQuery和CSS3技术来创建一种视觉效果，即在网页内容加载时显示的进度条。这种特效可以提供用户反馈，表明页面正在加载，并且增加了用户体验的互动...

    jQuery网页加载进度条插件

    总的来说，**jQuery网页加载进度条插件** 结合了pace.js的功能，为网页开发提供了一个强大的工具，能够优雅地处理页面加载过程，提高用户满意度。如果你在开发过程中遇到加载等待问题，这个插件会是一个非常实用的...

    jQuery网页加载进度条动画特效.rar

    【jQuery网页加载进度条动画特效】是一个利用JavaScript库jQuery和CSS3技术实现的网页加载效果。这个特效在用户等待网页完全加载时，提供一个可视化的进度条，展示当前页面加载的进度，以此提升用户体验，让用户知道...

    简单的jQuery动态加载进度条特效

    这里会有一个jQuery函数，监听某个事件（比如页面加载、按钮点击等），然后随着时间的推移改变进度条的宽度，模拟加载过程： ```javascript $(document).ready(function() { var progress = 0; var interval = ...

    jquery页面加载效果

    "jQuery页面加载效果"是指利用JavaScript库jQuery实现的动态加载动画，它能够以吸引人的视觉方式展示网页内容正在加载的过程，使用户在等待期间不会感到乏味。这种效果在现代网页设计中被广泛应用，尤其在内容分块...

    30 个 jQuery & CSS3 加载动画和进度栏插件

    例如，有些插件适用于全屏加载动画，如“FullPage Loading Spinner”，它在页面加载时占据整个屏幕，提供明显的加载指示；而“Minimalistic Circular Progress Bar”则适用于显示特定任务的进度，如视频缓冲或文件...

    jquery 进度条

    NProgress是一款轻量级且灵活的进度条插件，特别适合用于页面加载指示。使用NProgress，只需引入CSS和JS文件，然后调用`NProgress.start()`和`NProgress.done()`方法来控制进度条的开始和结束。 4. **Bootstrap ...

    JavaScript实现网页加载进度条代码超简单

    但是目前的浏览器并没有提供页面加载进度方面的接口，也就是说页面还无法准确返回页面实际加载的进度，本文中我们使用jQuery来实现页面加载进度条效果。 HTML 首先我们要知道的是，目前没有任何浏览器可以直接获取...

    jQuery nprogress.js页面加载进度条

    **jQuery nprogress.js** 是一个轻量级的JavaScript插件，专门用于在页面加载过程中为用户提供视觉反馈，显示当前网页的加载进度。这个插件通过创建一个动态的进度条，让用户感知到页面的加载状态，提高了用户体验。...

    jQuery页面滚动顶部进度条加载效果代码

    "jQuery页面滚动顶部进度条加载效果代码"是一个实现这种效果的示例，它利用JavaScript库jQuery来创建一个在页面滚动时动态显示的进度条，为用户呈现数据加载的过程，增加视觉吸引力。 jQuery是一个广泛使用的...

Magicbox
Global site tag (gtag.js) - Google Analytics