FL经典录像集

FL经典录像集

By19.Published on四月 13, 2009 15:31. 3 Views .
很差差一般好非常好 (暂时没有评分)
Loading ... Loading ...

FL经典录像集_(转自论坛,纪念日志)

继续阅读…Continue reading…

{ 6 comments } { Tags: , }

模拟页面加载的进度条

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
10
<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>
</body>

下面要做的就是根据自己站点的实际情况来显示什么了,第一步要加载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
2
<param name="FlashVars" value="textColor=0xFFFFFF&bgColor=0x752F28&loadingBgColor=0xC46739">
</param>

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

继续阅读…Continue reading…