jquery实现页面加载进度条(转)-白红宇

jquery实现页面加载进度条(转)

阅读量：7076 次

发布时间：2019-06-28

本文共 2815 字，大约阅读时间需要 9 分钟。

实现原理：

根据页面执行js的顺序将遮罩层和loading图片最先显示出来，等到页面加载完成后，用js控制图片消失。既在网页的头部放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，根据浏览器的载入顺序来实现的简易 Loading 状态条。

比较简单的步骤是：

1、首先在<body></body>开始的地方放置

2、在<head>和</head>之间放置样式和jquery框架

3、在页面的底部放置

一个在线生成loading图片的网站:

进一步的分析

loading Process traditional

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

new loading bar

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

1、引入 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;}

2、在模板各个部分的适当位置放置

3、在 footer.php 最末尾放上：

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

加入百分比提示的进度条

1、首先在你要显示进度条的位置加上标签，宽度初始设置0px，然后运用jquery的animate动画效果在相应的位置一个一个增加宽度，比如在正文顶部加上如下：

#loading是进度推进部分，并显示文字"30%"。按照图里一个一个加到相应位置，改下width和text属性就基本实现进度条了。

进度条是在这个基础上改进的，我的进度条结构是这样的：

2、百分比显示和"加载完毕"以及让进度条消失的jquery代码:

//进度条function remindload(loadpercent) {var text="努力加载ing..."if (loadpercent) {$('#loadtext').html(String(loadpercent) + "%"+text); //显示百分比}}var i = 0;function loadover() {if (i > 100) { //当大于100%时消失进度条$('#loadtext').html("加载完毕！").fadeIn("slow");//加载完毕提示$('#loadpercent').animate({width:"0px"},2000); //减少#loadpercent的宽度，消失效果$('#loadbg,#reloading>div').fadeOut(1600);//进度条消失return;}if (i <= 100) { //百分比计数，延迟加载setTimeout("loadover()", 100);remindload(i);i=i+5;}}$(document).ready(function() {loadover();});

3、css代码

/*loading*/#loadbg{
   z-index:1;left:400px;top:255px;position:fixed;background:#d2d2d2;width:400px;height:88px;opacity:.6}#reloading{
   z-index:1;left:400px;top:255px;position:fixed;}#reloading div{
   position:absolute;}#loadfull,#loadpercent{
   height:28px;margin:30px 0 0 50px;}#loadfull{
   background:white;width:300px;opacity:.7}#loadpercent{
   background:#000;width:0px;opacity:.8}#loadtext{
   font-size:14px;z-index:2;width:300px;color:#fff;padding:35px 0 5px 59px;}

4、判断代码修改一下上面的loadover函数：

function loadover() {
   if($.browser.msie&&!$.support.style)//判断的是IE内核，IE9却是直接不在此列，HOHO~{$('#loadtext').html("请使用Chrome或者Firefox获得最佳浏览体验！").fadeIn("slow");          setTimeout(function() {             $('#loadbg,#reloading>div,#loadpercent').fadeOut(1600);         }, 5000);  //5秒后消失}else if (i>100) {
   $('#loadtext').html("加载完毕！").fadeIn("slow");//加载完毕提示$('#loadpercent').animate({width:"0px"},2000); //减少#loadpercent的宽度，消失效果$('#loadbg,#reloading>div').fadeOut(1600);return;}

使用遮罩层的具体案例：

转载于:https://www.cnblogs.com/JoannaQ/archive/2013/03/22/2974872.html

你可能感兴趣的文章