JS+AS实现真正页面加载图片进度条(带百分比)
前因:由于用户要求,说图片太大了,每次加载要等半天,要做个加载条,但是网上找了很多都不是很理想,都是放个GIF图片在那,没能实现真正的加载,找不到就只能自己动手丰衣足食了.
开始了解到通过单纯的JS不能实现,因为读取不到图片所加载的进度,于是想了一下,由于以前本人搞过FLASH,于是想到了actionscript ,AS是可以读图片进度的,MovieClipLoader类 就可以办到,而AS又可以跟JS交互,FLASH8出了个跟JS交互的类external.ExternalInterface,我的做法是用AS来加载图片,因为加载完后缓存里有了图片,这样再通过JS设置下<img>的scr值图片就可以秒出来了,这样接口就通了,思路有了,开始实现吧 呵呵
首先是AS代码,先建一个名为”AS”的文件夹专门放AS代码的,在AS文件夹中建一个图片加载的类命为loadPic.as,
类的接口参数为ob:MovieClip 所装在图片的影片剪辑, uri:String所加载的图片路径,func:Function加载图片完毕后的回调函数(到时用来调JS的),loadIng:Function函数为实时控制页面上加载条的,返回的值为所加载的图片进度
代码如下 复制内容到剪贴板
class as.loadPic
{
public function loadPic(ob:MovieClip, uri:String, func:Function,loadIng:Function){
if(ob && uri) {
var mcldr = new MovieClipLoader();
var ldrob = new Object();
var loadnum:Number;
ldrob.onLoadStart = function(tmc) {
//var loadProgress = mcldr.getProgress(tmc);
}
ldrob.onLoadProgress = function(tmc, loadedBytes, totalBytes) {
loadnum=int(loadedBytes/totalBytes*100);
loadIng(loadnum);
}
ldrob.onLoadComplete = function(tmc) {
//var loadProgress = mcldr.getProgress(tmc);
}
ldrob.onLoadInit = function(tmc) {
if(func && typeof func == "function") {
func(tmc);
}
}
ldrob.onLoadError = function(tmc, errc){
}
mcldr.addListener(ldrob);
mcldr.loadClip(uri, ob);
}
}
}
图片加载类建好了,接下来是场景里的设置了 建一个名为main.as 的文件 写场景配置代码的
loadPicture函数有两个参数,loadUrl为JS传进来的图片的路径,picDiv为JS传进来的页面上所装载图片的DIV
关于external.ExternalInterface类的用法可以看下帮助,这里就不多说了,其实就是调用了外部两个JS函数picCallBack跟loadElement 前者为加载完毕后所执行的JS函数 后者为加载时控制进度条的函数
代码如下: 复制内容到剪贴板
import flash.external.ExternalInterface;//导入JS交互类
import as.loadPic;//装载加载类
function loadPicture(loadUrl,picDiv){
var randomNum=random(1000000000);//定义ID随机数
_root.createEmptyMovieClip("loadMc"+randomNum, _root.getNextHighestDepth());
new loadPic(_root["loadMc"+randomNum],loadUrl,function(ob){
//加载完毕触发JS回调函数
new ExternalInterface.call("picCallBack", loadUrl,picDiv,ob._width,ob._height);
},function(loadN){
//实时触发JS加载条控制函数
new ExternalInterface.call("loadElement",picDiv,loadN);
}
)
}
ExternalInterface.addCallback("forjs",null,loadPicture);
———————————华丽的分割线—————————————–
AS设置完毕了 接下来是JS代码了,因为这段时间在苦学JS的Jquery类库,所以大多数的语法是用JQ语法写的
首先导进两个JS库
<script language=”javascript” type=”text/javascript” src=”js/flashobject.js”></script>
<script language=”javascript” type=”text/javascript” src=”js/jquery.js”></script>
flashobject.js是用来插入SWF的
jquery.js为jquery类库
因为SWF是没必要让别人看见的,只是做为控制JS的一个触发器, 所以我设置大小为1*1象素
JS我定义了loadImg ,loadSwf , loadElement, picCallBack四个函数
loadImg是用来控制SWF加载图片的 用时候直接用这个函数事件就好了
loadSwf 是加载SWF的函数
loadElement 为控制进度条的函数
picCallBack为图片加载完毕后 所执行的回调函数 参数我在代码里都一一做了说明了
页面代码如下: 复制内容到剪贴板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>加载图片进度条</title>
<script language="javascript" type="text/javascript" src="js/flashobject.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="JavaScript">
//定义LOAD样式 loadBg为背景DIV loading为加载条DIV loadText为百分比DIV
var loadStr="<div id='loadBg' style='width:200px;height:10px;background-color:#dddddd;font-size:0px'><div id='loading' style='height:10px;background-color:#ff0000;font-size:0px;width:0px'></div></div><div id='loadTxt'></div>";
$(document).ready(function(){
loadSwf(1,1);//加在SWF触发器
//绑定加载按钮
$("#loadBtn_1").click(function(){
$("#urlText_1").val()!=""?loadImg($("#urlText_1").val(),"picDiv_1"):alert("路径不能为空");
})
$("#loadBtn_2").click(function(){
$("#urlText_2").val()!=""?loadImg($("#urlText_2").val(),"picDiv_2"):alert("路径不能为空");
})
})
//加载图片事件
//参数说明:url-图片路径,picDiv-装载图片的DIV的ID
//用法--------loadImg('http://www.aaa.com/pic.jpg','picDiv')
function loadImg(url,picDiv){
$("#"+picDiv).html(loadStr);
if (navigator.appName.indexOf("Microsoft") != -1) {
window["swfId"].forjs(url,picDiv);
}
else {
document["swfId"].forjs(url,picDiv);
}
}
//加载SWF事件
function loadSwf(rootWidth,rootHeight){
var fo = new FlashObject("loadSwf.swf", "swfId", rootWidth, rootHeight, "8", "");
fo.addParam("quality", "high");
fo.addParam("salign", "t");
fo.addParam("scale", "noscale");
fo.addParam("loop", "false");
fo.write("flashcontent");
}
//进度条实时控制函数事件
function loadElement(picDiv,n){
$("#"+picDiv+" #loading").width(n+"%");
$("#"+picDiv+" #loadTxt").html(n+"%");
}
//加载完毕后回调函数----回调参数说明:url-传回图片地址值,picDiv-传回所加载图片DIV的ID,w-传回的图片原始宽度,h-传回的图片原始高度
function picCallBack(url,picDiv,w,h){
$("#"+picDiv).html(" 图片高宽象素为:"+w+"*"+h+"<img src='"+url+"' alt=''/>").hide().fadeIn(1000);
}
</script>
</head>
<body style="background-color: #ffffff;font-size:12px;">
<div id="flashcontent"></div>
<div>
图片路径1:<input type="text" style="width:400px;" id="urlText_1"/>
<input type="button" value="加载图片" id="loadBtn_1"/>
</div>
<div id="picDiv_1"></div>
<div>
图片路径2:<input type="text" style="width:400px;" id="urlText_2"/>
<input type="button" value="加载图片" id="loadBtn_2"/>
</div>
<div id="picDiv_2"></div>
</body>
</html>
这样,一个页面图片加载进度条就完成了
