- 19~Blog |- 模拟页面加载的进度条

Search the Site

模拟页面加载的进度条

By19.Published on2009-03-6.

模拟页面加载的进度条

因为我们不能得到整个页面的大小和当前加载了多少，所以只能来模拟页面的加载进度。我这里提供了一个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：

<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）：

<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">

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

{ Tags: 模拟页面加载 }

(查看之前文章) » SVN-WEB客户端浏览程序及WP插件 | (查看之后文章) » FL经典录像集 |

最受欢迎文章：

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

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

NISOYT 说： ( Has commented 4 times in LL19.com )

2010-05-14于6:02 下午

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

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  2010-05-14于6:17 下午
  
  和路径没有关系，你有没有在页面的各个位置JS调用这个FLASH？
  
  比如
  1
  callLoadingBar(60,"页面加载...完全加载后所有功能才能正常使用 "," 加载了大约 "," 正在GOOGLE相关JS ");
  @NISOYT:
  
  回复 | 回复并邮件
  - NISOYT 说： ( Has commented 4 times in LL19.com )
    
    2010-05-15于2:50 上午
    
    调用了。。但是并没有起作用。问题是这样的，JS和CSS都安装完毕，SWF也可以正常显示在页头，调用也添加完毕，但是callLoadingBar无法起作用，表现为，这个FLASH一直在页头，0%的状态，并且不会自动关闭。并没有按正常的调用语句执行下去，应该是它根本就没有执行这些语句。我下载的是1.2的包，把里面的ll19_loading文件夹直接放在了WP根目录下也就是.com/blog/下，所有文件都是按这个路径使用的，没有改动过文件的位置，您看问题是出在哪里了？
    
    回复 | 回复并邮件
    - 19. 说： ( Admin commented )
      
      2010-05-15于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 说： ( Has commented 4 times in LL19.com )
        
        2010-05-15于5:23 下午
        
        THX，已解决，这个1.3确实管事啊。
        
        回复 | 回复并邮件
  - NISOYT 说： ( Has commented 4 times in LL19.com )
    
    2010-05-15于3:06 上午
    
    还有个小问题。。请问您侧栏的“最近回复”项的效果是用插件还自己写的样式呢？很华丽，又不失简洁，很喜欢。。
    
    回复 | 回复并邮件
nobird 说： ( Has commented 2 times in LL19.com )

2009-12-31于4:16 下午

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

回复 | 回复并邮件
sok 说： ( Has commented 7 times in LL19.com )

2009-10-15于10:21 下午

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

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  2009-10-16于2:54 下午
  
  @sok:插件是改过，不过个人感觉你说的那个问题应该没有，要么你更新下这个插件再试试，或者去作者的站问问。
  
  回复 | 回复并邮件
  - sok 说： ( Has commented 7 times in LL19.com )
    
    2009-10-16于5:33 下午
    
    嗯。解决了。重新激活下插件就可以了。不知何故。
    
    不过现在装了个magic mailer。代替默认的邮件引擎。这样邮件提醒里的发件人就不是wordpress@xuanxiaoyan.w11.51host.cn这样的格式。而是自己的邮箱。这样比较友好。
    
    回复 | 回复并邮件
    - sok 说： ( Has commented 7 times in LL19.com )
      
      2009-10-16于7:25 下午
      
      《magic mailer》好像对WP-DB-BACKUP支持不是很好。无法收到备份。应该是远程调用SMTP对附件支持有问题
      在google又找了《WP mail from》插件，这个不替换引擎。只修改发件人和发件人地址。效果不错。
      
      回复 | 回复并邮件
sok 说： ( Has commented 7 times in LL19.com )

2009-10-14于3:01 下午

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

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  2009-10-15于3:16 下午
  
  @sok:
  页面我看了~我提供的代码是没有问题的不管是在IE还是FF等的浏览器下。
  
  你给出的页面，页面和JS都有编码错误，你可以自己在FF的错误控制台中看遍会提示你的JS有问题-illegal character。在IE下也是，你直接查看源文件里面也会出现非法的字符，估计这就是造成你无法正常使用的原因，如果静态页面测试的话我建议你把文件都存成UTF8的格式。
  
  回复 | 回复并邮件
  - sok 说： ( Has commented 7 times in LL19.com )
    
    2009-10-15于6:06 下午
    
    哦。我在弄弄看 ^ ^
    
    回复 | 回复并邮件
sok 说： ( Has commented 7 times in LL19.com )

2009-10-14于2:51 下午

博主啊。我是个代码盲，不过你学写够详细，先谢谢了。
我用的是IE6。。（没办法。老机子）。。效果很好。可是在firefox和chrome下就不动了。
原以为是自己修改的时候哪改错了。

我就把你的1.2样例。都没改动。直接上传到空间。才发现也是不行。IE6可以动。FireFOX和chrome下动也不动。字都不显示。只有和“00%”,
改怎么解决呢。真的很喜欢这效果额~~~
我放的空间：
http://welfare-bj.com/loading/bar/1.2.html

回复 | 回复并邮件
sok 说： ( Has commented 7 times in LL19.com )

2009-10-14于2:49 下午

博主啊。我是个代码盲，不过你学写够详细，先谢谢了。
我用的是IE6。。（没办法。老机子）。。效果很好。可是在firefox和chrome下就不动了。
原以为是自己修改的时候哪改错了。

我就把你的1.2样例。都没改动。直接上传到空间。才发现也是不行。IE6可以动。FireFOX和chrome下动也不动。字都不显示。这是为什么呢？
我放的空间：
http://welfare-bj.com/loading/bar/1.2.html

回复 | 回复并邮件
sam 说： ( Has commented 1 times in LL19.com )

2009-09-23于2:37 下午

貌似在chrome下無法實現效果哦

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  2009-09-23于3:39 下午
  
  在各种浏览器下均测试通过~
  
  回复 | 回复并邮件

Leeiio 说： ( Has commented 5 times in LL19.com )

2009-04-13于11:08 上午

不知道爲什麽我的博客如果不加上closeLoadingBar();的話，在win的safari下當加載最後的100顯示的時候瀏覽器就自動關閉了。

回复 | 回复并邮件

19. 说： ( Admin commented )

2009-04-13于11:49 上午

@Leeiio:

我在safari测试了一下到是没这样的问题，而且加载到100%也是调用closeLoadingBar()这个函数，不应该关闭整个浏览器 – 。-。

其实在页面最后手动执行closeLoadingBar()这个函数的意义是可能会有这样的情况（也许很少），就是整个页面都加载完毕了，不过这个FLASH LOADING 确还没有加载完，这样这个FLASH BAR就不会调用closeLoadingBar()了（应为已经没有callLoadingBar(100)），不知道我说清楚了没有 – 。-

回复 | 回复并邮件

Leeiio 说： ( Has commented 5 times in LL19.com )

2009-04-13于12:57 下午

查看你的loading条的js，发现注释掉了function closeLoadingBar()里的
var divobj = document.getElementById(“loadingbar”);
divobj.parentNode.removeChild(divobj);
我把我的js也注释掉这个后发现正常了，safari下不会自动关闭了。

回复 | 回复并邮件

19. 说： ( Admin commented )

2009-04-13于1:43 下午

@Leeiio:
Sorry~刚刚测试了一下确实有这样的问题，closeLoadingBar()
这句divobj.parentNode.removeChild(divobj);
在删除DIV的时候Safari下会有问题~

还没搞懂的是~为什么FLASH调用的时候删除会有问题，直接在页面调用就没问题 – 。-
在callLoadingBar(100);下面加上closeLoadingBar();能防止FLASH执行ExternalInterface类调用JS，所以暂时就这样解决吧 – 。-

要么你试试我的方法，把closeLoadingBar()里面的代码都注释掉，callLoadingBar(100);下面用jQuery平滑移出LOADINGBAR：

jQuery("#loadingbar").animate({
	top : "-5"
}, 3000, function() {
	jQuery("#loadingbar").animate({
		top : "-50"
	}, 2000, function() {
		jQuery("#loadingbar").empty().hide();
	});
});

回复 | 回复并邮件

Leeiio 说： ( Has commented 5 times in LL19.com )

2009-04-13于4:05 下午

對，我就是用你的這個方法解決的，把js裡面的closeLoadingBar()注釋掉了。

回复 | 回复并邮件

熬稀饭大米粥说： ( Has commented 1 times in LL19.com )

2009-03-31于4:34 下午

很强大。

回复 | 回复并邮件
DAE 说： ( Has commented 1 times in LL19.com )

2009-03-27于2:51 下午

谢谢咯~~真的很不错的创意！
不知道是自己菜还是怎么的~~~控制不到它的垂直位置~~水平位置能控制~~~~

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  2009-03-27于3:46 下午
  
  @DAE:
  我提供的那段CSS应该是没有问题的，如果你想让它显示在不同位置就修改那段CSS就行了~
  
  回复 | 回复并邮件
VAS 说： ( Has commented 1 times in LL19.com )

2009-03-22于3:04 下午

效果很棒，用上了~谢谢

回复 | 回复并邮件
杀手爱喝牛奶说： ( Has commented 2 times in LL19.com )

2009-03-11于4:25 下午

学习学习

回复 | 回复并邮件
杀手爱喝牛奶说： ( Has commented 2 times in LL19.com )

2009-03-11于4:23 下午

果然是纯技术博客啊

回复 | 回复并邮件
Leeiio 说： ( Has commented 5 times in LL19.com )

2009-03-6于5:59 下午

很酷，已经使用了，感谢分享~就是flash不太会，你的似乎都是调用的，是否要把com文件夹放进flash源文件的文件夹里面再编译的？

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  2009-03-6于6:20 下午
  
  @Leeiio:
  新加一个类路径../as3，直接编译src\blocks\loading_19\flash下的FLASH就行。
  
  回复 | 回复并邮件