网页加载进度条的JS程序开发思路与实际应用

作者:网站建设公司 来源:佛山网站建设日期:2020-11-11 浏览:

网站建设 > 建站教程 > 网页设计 > 网页加载进度条的JS程序开发思路与实际应用


页面加载进度条实现原理:
将要加载的js动态的添加到head中,并根据每个是否加载完成,统计当前一共加载完成的个数。当每一项都加载完成,加载成功。设置加载失败时间。当超过这个时间提示加载失败。

一、实现逻辑与概念

先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小。所以我们无法通过数据大小来实现0-100%的加载显示过程。

因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行大概的模糊进度反馈来实现进度加载的效果。大致意思是:页面每加载到指定区域,则返回(n)%的进度结果,通过设置多个节点,来达到一步一步显示加载进度的目的。

具体是如何设置呢?先我们将网页分成若干区域,就以 frontopen来说,网站的结构分为head区域、mian区域(文章主体部分)、sidebar侧边栏、foot脚部 四个部分。考虑做一个范围粗犷一点 进度反馈效果。

将进度反馈设置为四个部分:head部分返回30%进度,main部分返回60%进度,sidebar部分返回70%进度,后foot加载完成后返回100%。

二、实现方法

1.先我们需要在html页面中,给进度条设定设定一个容器。例如本博的body下方会有一个“<div class=”loading”></div>”的div容器,这就是后面我们需要操作并显示的进度条了,当然大家有兴趣的话可以设置更多有个性的进度条。

2.为loading容器设定样式,以本博的进度条为例,样式如下:

1 2 3 4 5 6 7 .loading{     background:#FF6100; //设置进度条的颜色     height:5px; //设置进度条的高度     position:fixed; //设定进度条跟随屏幕滚动     top:0; //将进度条固定在页面顶部     z-index:99999  //提高进度条的优先层级,避免被其他层遮挡 }

3.通过jquery的animate动画效果,来实现进度条的动画加载过程。简单的进行构思,决定使用由左向右的加载效果。终animate的执行代码为“$(‘.loading’).animate({‘width':’100%’},200);”

4.思考需要设置几个加载进度节点。上面通过构思,我们已经决定使用30%、60%、70%、100%四个进度节点,分别插入到对应的页面位置。并结合上面的animate动画代码,终确定四个进度节点的代码为:$(‘.loading’).animate({‘width':’30%’},50) 、 $(‘.loading’).animate({‘width':’60%’},50) 、 $(‘.loading’).animate({‘width':’70%’},50) 、 $(‘.loading’).animate({‘width':’100%’},50)。 可能大家会问,为什么速度变成了50毫秒?因为之前一步加载为100%的动画被分成份,所以为了保证动画的连贯性,将其每份切分成为50毫秒。

三、插入到页面中的实际应用示例

以本博模板页文件index.php为例,给大家展示四个节点如何插入到对应的位置。当然这个示例只是为了更好的解释上面的程序策划结论,并不限于这种设置方法。大家在需要的地方可以发挥更多的想象,举一反三创造出更绚丽的样式。

index.php文件代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <?php /** * The main template file. * * This is the most generic template file in a WordPress theme * and one of the two required files for a theme (the other being style.css). * It is used to display a page when nothing more specific matches a query. * E.g., it puts together the home page when no home.php file exists. * Learn more: http://codex.wordpress.org/Template_Hierarchy * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ ini_set('display_errors', false);  //关闭报错   get_header(); ?>  //引用模板的头部PHP文件 <script type="text/javascript">     $('.loading').animate({'width':'33%'},50);  //个进度节点 </script>                <div class="main">               <?php             /* Run the loop to output the posts.              * If you want to overload this in a child theme then include a file              * called loop-index.php and that will be used instead.              */              get_template_part( 'loop', 'index' );             ?>             </div><!-- #main --> <script type="text/javascript"> $('.loading').animate({'width':'55%'},50);  //第二个节点 </script> <?php get_sidebar(); ?>  //引用sidebar模板php文件 <script type="text/javascript">     $('.loading').animate({'width':'78%'},50);  //第三个节点 </script> <?php get_footer(); ?>  //引用foot模板php文件 <script type="text/javascript">     $('.loading').animate({'width':'100%'},50);  //第四个节点 </script>

四、程序的补充完善与优化
通过上面三步、已经基本可以完成整个loading程序的运行。但是进度条加载完成后,无法自动消失?这当然是不行的了,因此我们需要使用另外一段代码,在文档加载完成后将进度条隐藏。
代码如下:

1 2 3 $(document).ready(function(){     $('.loading').fadeOut();     });

通过以上设置,即可当页面100%加载完成后,执行jquery的fadeOut函数,将进度条隐藏,完成整个程序的收尾。


企业网站建设一条龙
找零度飞易网络公司-fslingdu所做php网站建设方案网站设计网站制作北京上海深圳龙岗衢州兰州常州东营南通济宁桂林淮安烟台长春无锡天津昆山苏州合肥洛阳昆明天津唐山泉州惠州万州新乡商丘台州哈尔滨太原摄影海口随州学校商丘广东湖南广西江西海南广州企业中小企业武汉南山罗湖福田虎门肇庆汕尾汕头广州佛山成都杭州济南重庆福州西安厦门昆山沈阳青岛徐州郑州南京南宁长沙大连淄博石家庄南昌温州珠海番禺顺德三水高明中山东莞合肥江门嘉兴西宁大良容桂伦教勒流陈村均安杏坛龙江乐从北滘祖庙石湾南庄等地区企业网站建设(广告)公司提供专业做网站价格规划书及营销型网站制作,网站建设基础知识
标签: 网页开发

网站建设费用

网站制作电话:137 1543 1176

网站开发QQ:378780108

E-mailsale@fslingdu.com如何制作网站QQ :378780108

网站建设服务

网站建设公司零度飞易是一家专业网站设计,网站制作、seo优化,网站推广,网站建设的佛山网络运营公司。零度飞易在家具网站建设小家电网站建设服装网站建设电器网站建设机械网站建设等行业的网站设计、网络运营都得到行业认可,在上海深圳北京广州佛山中山东莞地区有着良好的口碑品牌的网站建设公司。我们的使命是打造创新型的网站建设企业,能轻易地开展“互联网+”业务、实现“互联网+企业”的企业愿景。

Hi,Are you ready?

准备好开始了吗?
那就与我们取得联系吧

有一个互联网项目想和我们谈谈吗?您可以填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与你取得联系。当然也欢迎您给我们写信或是打电话,让我们听到你的声音!

零度飞易 互联网整合营销

地址:佛山市顺德区大良凤翔商业广场二座670

业务QQ:378780108

策划专线:13715431176

E-mail:sale@fslingdu.com

合作意向表

您需要的服务

现有网站改版
我需要做微信营销
建设全新的企业网站
要找长期合作公司,需要年度服务
我需要做购物商城
我需要做系统平台

您最关注的地方

对功能要求比较高
对设计创意要求比较高
需要可以购物支付
搜索引擎排名

价格预算

1-3万3-5万5-8万8-10万10万以上大型项目需要招标