• 开启全站HTTPS。2017-04-29
  • 本站为非盈利性站点,所得收入全部用于网站服务器及其他费用。2015-10-15
  •    3年前 (2015-12-08)  网站建设 |   抢沙发  47 
    文章评分 0 次,平均分 0.0

    现在越来越多的网页都添加了进度条提示,lodaing界面不仅能给用户带来良好的体验,而且有效的消除了程序加载等待过程中的枯躁感。从加载进度可以有效的得知还有多久能打开页面。

    本文主要是讲述如何以通过jquery的方式来实现页面加载进度的反馈方法。

    给网页添加loading加载进度条的JS程序开发与应用

    实现逻辑与概念

    大致思路为:页面每加载到指定区域,则返回(n)%的进度结果,通过设置多个节点,来达到一步一步显示加载进度的目的。

    首先我们将网页分成若干区域,网站的结构分为head区域、mian(文章主体部分)、sidebar-侧边栏、foot底部四个部分。

    所以我们可以将进度反馈设为四部分:head返回30%进度,main返回60%进度,sidebar返回70%进度,最后foot底部区域加载完成后返回100%。

    实现方法

    1.首先我们需要在html页面中,给进度条设定设定一个容器。例如将代码加入header.php里,定义一个css样式<div class="loading"></div>然后在css文件里调整这个样式。这就是后面我们需要操作并显示的进度条了,当然大家有兴趣的话可以设置更多有个性的进度条。

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

    3.进度条的动画效果:可通过jquery来实现进度条的动画加载过程。如需由左向右的加载效果。最终animate的执行代码为:

    4.我们现在需要的是30%、60%、70%、100%四个节点。最终确定四个进度节点的代码为:

    可能大家会问,为什么速度变成了50毫秒?因为之前一步加载为100%的动画被分成四份,所以为了保证动画的连贯性,将其每份切分成为50毫秒。分别将代码插入到程序对应部分文件即可。

    程序的补充完善

    当进度条加载完成后,我们需要其自动消失,因此我们需要使用另外一段代码,在文档加载完成后将进度条隐藏。
    代码如下:

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

     

     

    除特别注明外,本站所有文章均为小浩博客原创,转载请注明出处来自https://www.xhsay.com/wed-add-lodaing.html

    关于
    小浩博客(www.xhsay.com)是由Tovey建立的个人站点,主要致力于整合并分享各种互联网及网站建设的资源。

    发表评论

    表情 格式

    暂无评论

    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册