模拟页面加载的进度条

By19.Published on三月 6, 2009 14:17. 158 Views .
很差差一般好非常好 (1 次评分, 平均: 4.00 out of 5)
Loading ... Loading ...

模拟页面加载的进度条

因为我们不能得到整个页面的大小和当前加载了多少，所以只能来模拟页面的加载进度。我这里提供了一个FLASH LOADING BAR来模拟页面的加载进度，点击下方的地址下载。

1.3版本包括编译好的FLASH及使用实例，解决了整个页面全部加载完毕后，FLASH LOADING BAR还没有加载完毕的问题（这种情况一般很少发生，而且这种情况就说明你的整个页面流很小，完全没必要给对方以提示了~），即一定要执行最后一次的CALL（提供的例子用监听模拟整个页面加载过程，请在WEB环境下测试！）。当然如果用JS+CSS做就不会有这种情况发生，不过相比较FLASH的动画效果要更好，各有优缺点吧。

1.2和1.0包括FLASH BAR的源文件，需要源文件可以下载这两个版本。

如果你想看效果的话可以刷新当前页面，左上角就会出现提示页面的加载进度（清空缓存的情况下最明显，可以清空缓存再刷新测试，请不要点击其他链接测试，站点全部是AJAX加载，由于AJAX默认是异步传输，所以在AJAX的时候不能用此方法来模拟页面加载的进度）。

| 下载地址(1.3) | 源文件下载地址(1.2) | 源文件下载地址(1.0) |

由于站点的JS较大，很多的函数是在页面全部完成加载后才执行的，所以这样做可以给浏览者以相关的提示。

使用方法，拿自己的站点举例，也可以参考1.3版本中的实例：首先head标签只引入LOADING需要的CSS和JS~

1
2

<link href="loading.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='loadingbar.js'></script>

注：其他的CSS,JS文件不需要在head上就引入。由于页面是从上往下执行，所以你要明白到什么地方会加载什么，差不多加载的进度是什么。之后在BODY一开始就引入这个LOADING BAR，注意ID：

1
2
3
4
5
6
7
8
9

<body>
<div id="loadingbar">
<object id="loadingBarFlash" type="application/x-shockwave-flash" data="http://www.ll19.com/glll/19_loading/loading_19.swf" width="100%" height="50">
<param name="movie" value="http://www.ll19.com/glll/19_loading/loading_19.swf" />
<param name="BGCOLOR" value="" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>
</div>

下面要做的就是根据自己站点的实际情况来显示什么了，第一步要加载JQUERY和1.3版本的loadingBar.lastCall.js以及你站点的CSS、JS等（JS还是建议在最后加载），则紧跟着写入：

1
2
3

<script type="text/javascript">callLoadingBar(5,"页面加载...完全加载后所有功能才能正常使用 "," 加载了大约 "," 正在加载相关CSS-JS ");</script>
<script type='text/javascript' src='jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='loadingBar.lastCall.js'></script>

这段函数的是为了调用FLASH LOADING来显示相关信息用的，第一个参数5表示现在大约加载了5%；之后第二个参数是显示在最前面的说明文字，第三个参数是显示在5%前面的文字，比如用“大约加载了”或者“加载了”，最后一个参数是表示现在正在加载什么内容，之后FLASH LOADING会根据这些来显示相关的信息和进度、百分比。下面要做的就类似了,比如我在文章加载之前加入：

1

<script type="text/javascript">callLoadingBar(15,"页面加载...完全加载后所有功能才能正常使用 "," 加载了大约 "," 正在加载文章 ");</script>

文章加载完毕需要加载GOOGLE的JS之前加入：

1

<script type="text/javascript">callLoadingBar(60,"页面加载...完全加载后所有功能才能正常使用 "," 加载了大约 "," 正在GOOGLE相关JS ");</script>

GOOGLE的JS加载完毕需要加载站点最后的JS处加入：

1

<script type="text/javascript">callLoadingBar(80,"页面加载...完全加载后所有功能才能正常使用 "," 加载了大约 "," 正在最后的JS ");</script>

之后完成所有加载，在页面的最底部（body的最后）加入（1.3新加的LASTCALL）：

1
2
3
4
5

<script type="text/javascript">
var l = new loadingBarHandler();
l.loaderBarCompleteEvent(loaderBar_last_call);
l.run();
</script>

就OK了。

09.03.27更新1.2版本：加入个性化颜色配置，稍微更改了LOADING BAR的外观：

现在可以根据自己站点的主颜色来配置这个LOADING BAR的颜色了，在FLASH的OBJECT中加入下面一段配置颜色的参数（这里是一个不同颜色的LOADING BAR演示页面：http://www.ll19.com/up/19loading/1.2.html）：

1

<param name="FlashVars" value="textColor=0xFFFFFF&bgColor=0x752F28&loadingBgColor=0xC46739">

从左到右依次为：字体颜色、加载完毕的背景颜色、正在加载的背景颜色。

本文来自： http://www.ll19.com/web_loading.html

{ Tags: }
«
»
这篇文章发布于 2009年03月6日，星期五，2:17 下午，归类于 Diary。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。

31 Responses to “ 模拟页面加载的进度条 ”

  1. NISOYT NISOYT 说： ( Has commented 4 times in LL19.com )
    五月 14, 2010 18:02 于 6:02 下午

    您好站长，在下很菜。。我的WP是装载主机二级目录/blog下的，请问这个文件包内的这些文件应该分别放在什么位置才能正常调用呢？我全部设置好后发现callLoadingBar不能正常工作，页面就加载了一个0%的FLASH文件在页头，callLoadingBar无法控制这个FLASH。。。也就是说这个callLoadingBar实时控制不了进度条，我怀疑是文件路劲没有弄对，望站长能告知如何正确安放文件到主机中。谢过！

    回复 |  回复并邮件
    • 19. 19. 说： ( Admin commented )
      五月 14, 2010 18:17 于 6:17 下午

      和路径没有关系，你有没有在页面的各个位置JS调用这个FLASH？

      比如

      1

      callLoadingBar(60,"页面加载...完全加载后所有功能才能正常使用 "," 加载了大约 "," 正在GOOGLE相关JS ");

      @NISOYT:

      回复 |  回复并邮件
      • NISOYT NISOYT 说： ( Has commented 4 times in LL19.com )
        五月 15, 2010 2:50 于 2:50 上午

        调用了。。但是并没有起作用。问题是这样的，JS和CSS都安装完毕，SWF也可以正常显示在页头，调用也添加完毕，但是callLoadingBar无法起作用，表现为，这个FLASH一直在页头，0%的状态，并且不会自动关闭。并没有按正常的调用语句执行下去，应该是它根本就没有执行这些语句。我下载的是1.2的包，把里面的ll19_loading文件夹直接放在了WP根目录下也就是.com/blog/下，所有文件都是按这个路径使用的，没有改动过文件的位置，您看问题是出在哪里了？

        回复 |  回复并邮件
        • 19. 19. 说： ( Admin commented )
          五月 15, 2010 11:32 于 11:32 上午

          这个和路径没有关系，如果你正确引入了所有JS和CSS文件确没有效果，首先看看浏览器JS有没有报错，其次你引入FLASH的object的id是不是loadingBarFlash，FLASH的DIV层的ID是不是loadingbar。

          如果都正确还是无法执行可能的原因就是页面全部装载完毕不过这个FLASH的loadingbar确还没有加载完毕（这种情况一般很少发生），我刚刚修改提供了一个1.3版本来控制loadingbar无论如何也执行最后一次的调用操作。你可以下载那个再测试一下。

          侧边栏的内容可以参考这篇文章http://www.ll19.com/wp_recent_comments.html

          @NISOYT:

          回复 |  回复并邮件
          • NISOYT NISOYT 说： ( Has commented 4 times in LL19.com )
            五月 15, 2010 17:23 于 5:23 下午

            THX，已解决，这个1.3确实管事啊。

            回复 |  回复并邮件
      • NISOYT NISOYT 说： ( Has commented 4 times in LL19.com )
        五月 15, 2010 3:06 于 3:06 上午

        还有个小问题。。请问您侧栏的“最近回复”项的效果是用插件还自己写的样式呢？很华丽，又不失简洁，很喜欢。。

        回复 |  回复并邮件
  2. nobird nobird 说： ( Has commented 2 times in LL19.com )
    十二月 31, 2009 16:16 于 4:16 下午

    很好看，似乎不用flash也行吧…–

    回复 |  回复并邮件
  3. sok sok 说： ( Has commented 7 times in LL19.com )
    十月 15, 2009 22:21 于 10:21 下午

    19.问下，Mail To Commenter这插件你有修改过吗？
    我使用这插件。发送的邮件，内容虽然没问题。可是没有标题。。你的回显示标题

    回复 |  回复并邮件
    • 19. 19. 说： ( Admin commented )
      十月 16, 2009 14:54 于 2:54 下午

      @sok:插件是改过，不过个人感觉你说的那个问题应该没有，要么你更新下这个插件再试试，或者去作者的站问问。

      回复 |  回复并邮件
      • sok sok 说： ( Has commented 7 times in LL19.com )
        十月 16, 2009 17:33 于 5:33 下午

        嗯。解决了。重新激活下插件就可以了。不知何故。

        不过现在装了个magic mailer。代替默认的邮件引擎。这样邮件提醒里的发件人就不是wordpress@xuanxiaoyan.w11.51host.cn这样的格式。而是自己的邮箱。这样比较友好。

        回复 |  回复并邮件
        • sok sok 说： ( Has commented 7 times in LL19.com )
          十月 16, 2009 19:25 于 7:25 下午

          《magic mailer》好像对WP-DB-BACKUP支持不是很好。无法收到备份。应该是远程调用SMTP对附件支持有问题
          在google又找了《WP mail from》插件，这个不替换引擎。只修改发件人和发件人地址。效果不错。

          回复 |  回复并邮件
  4. sok sok 说： ( Has commented 7 times in LL19.com )
    十月 14, 2009 15:01 于 3:01 下午

    刚才回复的时候浏览器崩溃了。不知到有没有回复成功。再发次。
    我把博主你的1.2样例传到http://welfare-bj.com/loading/pure12/1.2.html上，IE下能懂。firefox和chorme下flash没动静，只有个“00%”。
    正常吗？
    改怎么解决。？

    回复 |  回复并邮件
    • 19. 19. 说： ( Admin commented )
      十月 15, 2009 15:16 于 3:16 下午

      @sok:
      页面我看了~我提供的代码是没有问题的不管是在IE还是FF等的浏览器下。

      你给出的页面，页面和JS都有编码错误，你可以自己在FF的错误控制台中看遍会提示你的JS有问题-illegal character。在IE下也是，你直接查看源文件里面也会出现非法的字符，估计这就是造成你无法正常使用的原因，如果静态页面测试的话我建议你把文件都存成UTF8的格式。

      回复 |  回复并邮件
      • sok sok 说： ( Has commented 7 times in LL19.com )
        十月 15, 2009 18:06 于 6:06 下午

        哦。我在弄弄看 ^ ^

        回复 |  回复并邮件

回复分页(Comments pages):     « 早前评论   

文章回复(Leave a reply):

注意: 评论者允许直接点击留言人下方的“回复并邮件”按钮将自己回复的评论邮件通知另外评论者。点击“回复”按钮则只回复不发邮件。