jQuery 页面载入进度条收藏

页面 Loading 条基本人人都会用。它的原理很简单：在页头放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。

上图展示了传统 Wordpress 模板在浏览器中的载入顺序，Loading 条的出现和消失分布于头尾。

如果我们在页面的不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果，其完全可以与浏览器自带的状态条媲美。

先来看一个演示：地址。

要得到演示上的进度条效果，首先，引入 jQuery 框架(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置：

CSS 可以这么写：

#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}

准备工作到这里就做好了。

接着，请随意发挥，依照你对图二的理解，在模板各个部分的适当位置放置：

其中红色数值应该随载入顺序逐步增加，直到 footer.php。另外别忘了在 footer.php 最末尾放上：

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

转载于:https://www.cnblogs.com/qiantuwuliang/archive/2009/03/08/1406092.html

jQuery 页面载入进度条收藏相关推荐

jQuery 页面载入进度条 (必有一款适合你----综合搜集版)
链接主题: 预加载图片延迟加载图片 Lazy Load javascript图片浏览器的核心--图片预加载第一种方法: 页面 Loading 条基本人人都会用.它的原理很简单:在页头放置一个文字或 ...
页面载入进度条 nprogress的使用
介绍页面路由切换时,附带一个加载进度条会显得非常友好,不至于白屏时间过长,让用户以为页面假死. 这时候我们可以用到 nprogress[108],在路由切换时开启和关闭: 安装 npm npm in ...
【Unity使用UGUI实现王者荣耀UI界面（一）】加载页面（进度条）
文章目录 [Unity使用UGUI实现王者荣耀UI界面(一)]加载页面(进度条) 1. 素材准备 2. 界面分析 3. 打开Unity Hub创建项目 4. 开始搭建UI 1. 准备工作 2. 背景图 ...
js网页顶部线性页面加载进度条,jquery头部线性进度条总结
前言网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 头部LoadingBar线性进度条总结上面的代码只是静态效 ...
无刷新上传Excel后利用JQuery AJAX 显示进度条的实现方式
1.前台上传页面代码 <divclass="clearfix mywebsite-nodata"><divid="show"><f ...
android加载h5页面加进度条,使用Android仿微信加载H5页面的进度条
这篇文章主要为大家详细介绍了Android仿微信加载H5页面进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下前言 Android中WebView打卡前端页面时受到网路环境,页面内容大小的影响 ...
jquery css 流程进度条
方案1: 方案2: <!DOCTYPE html> <html><head> <meta charset="utf-8"> < ...
ajax 进度条 php,php – Jquery :: Ajax提供进度条？
您可以通过.html()将动画gif加载到结果区域,直到ajax函数返回结果.只是一个想法关于jquery ui进度条,间歇地通过你的脚本,你会想要一个表示完成百分比的数值作为一个赋值的javasc ...
JQuery插件——progressbar进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jquery插件之进度条
以下是需要引入的一些文件,如果没有您可以通过给定的地址进行下载,谢谢: jquery-1.7.1.min.js http://jqueryui.com/ j ...

jQuery 页面载入进度条收藏

jQuery 页面载入进度条收藏相关推荐

最新文章

热门文章