jQuery 页面载入进度条实现代码_jquery-js教程-PHP中文网

jQuery 页面载入进度条实现代码_jquery

php中文网

发布： 2016-05-16 18:56:12

原创

1500人浏览过

loading Process traditional

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

触发式加载精美特效企业网站源码1.0.0

触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也

查看详情

new loading bar

如果我们在页面的不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果，其完全可以与浏览器自带的状态条媲美。
先来看一个演示：地址。
要得到演示上的进度条效果，首先，引入 jQuery 框架(一定要放在页头标签内)。然后在标签起始位置放置：

复制代码代码如下:

CSS 可以这么写：

复制代码代码如下:

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