Javascript教程_JS+AS实现真正页面加载图片进度条(带百分比)_Javascript教程_H5之家

前因:由于用户要求,说图片太大了,每次加载要等半天,要做个加载条,但是网上找了很多都不是很理想,都是放个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为图片加载完毕后所执行的回调函数参数我在代码里都一一做了说明了

页面代码如下:

代码: