jquery+flash显示图片实时加载进度插件

$.cancelEvent = function (e) {//阻止事件冒泡    if (e.stopPropagation) e.stopPropagation();    else e.cancelBubble = true;    if (e.preventDefault) e.preventDefault();    else e.returnValue = false;};(function ($) {//jquery+flash显示图片实时加载进度插件    $.fn.design = function (cfg) {//配置参数 swfID：flash的容器ID,swfUrl：flash文件地址, step：鼠标滚轮滚动一次图片放大缩小的数值，imgLoading:如果无法获取到swf容器时等待图片地址，图片大小16x16        function swfContainer() {//获取SWF容器，注意不能返回swf注册的回调函数，要不Firefox会出错            var c = window[cfg.swfID] || document[cfg.swfID] || $('#' + cfg.swfID).get(0);            if (c && c.forJS) return c; return false;        }        function ajust(e) {//鼠标滚轮事件，往下滚动放大，否则缩小，注意IE和w3c浏览器相反            e = e || window.event; $.cancelEvent(e);            var op = (_ie ? -e.wheelDelta : e.detail) > 0 ? "+=" : "-=", p = { width: op + cfg.step + "px", height: op + Math.ceil(_img.height() * cfg.step / _img.width()) + "px" };            if(_img.width()<=300&&op=='-=')return false;//限制图片最小为300px            _img.stop(true).animate(p, 100); resizelightbox();        }        function mousewheel(bind) {//绑定鼠标滚动事件            if (bind) _ie ? _img.get(0).onmousewheel = ajust : _img.bind('DOMMouseScroll', ajust);            else _ie ? _img.get(0).onmousewheel = null : _img.unbind('DOMMouseScroll', ajust);             $(window)[bind ? 'bind' : 'unbind']('resize', resizelightbox);//如果窗体大小改变也重置lightbox大小        }        function show(_show) {//显示或者隐藏lightbox和内容层            if (_ie6) $('select').css('visibility', _show ? 'hidden' : 'visible');            if (_show) {//显示                _info.html('正在下载...');                _pro.css('width', '1%');                if (!_container) _info.css('background', 'url('+cfg.imgLoading+') no-repeat 100px 7px');//如果无法获取到swf容器，则显示等待图片                _pop.show();                Resize(true);            }            else {//隐藏                _pop.hide();                mousewheel(false);//注销鼠标滚动事件                toolbar();//隐藏操作栏                _pro.parent().show();                _img.get(0).style.cssText = '';//去掉鼠标滚动时加上的内联样式            }            _lightbox[_show ? 'show' : 'hide']();        }        function resizelightbox() {//设置lightbox的大小            _lightbox.css({ width: $(document).width(), height: $(document).height() });        }        function Resize(loading) {//设置内容层的位置            var wh = $(window).height(), ww = $(window).width(), pw = _pop.outerWidth(), ph = _pop.outerHeight()                     , p = { left: 0, top: 0 }, scrolltop = $(document).scrollTop();            if (pw < ww) p.left = (ww - pw) / 2;            if (ph < wh) p.top = (wh - ph) / 2 + (_ie6 ? scrolltop : 0);            if (loading) _pop.css({ top: p.top, left: p.left });//图片加载等待            else {//图片加载完毕显示                mousewheel(true);//添加鼠标滚动事件                if (p.left > 0 || p.top > 0) _pop.animate(p, 500);//动画形式移动内容层居中            }            resizelightbox();        }        function toolbar(show, onlyClose) {//显示和隐藏操作栏            if (show) {                if (onlyClose) _toolbar.children().hide().eq(2).show();                else _toolbar.children().show(); _toolbar.show();            } else _toolbar.hide();        }        $.fn.design.loading = function (p, loaded, total) {//flash中加载图片过程需要调用的js方法            _pro.css('width', p + '%');            _info.html("已下载：" + Math.ceil(loaded / 1024, 1) + "kb，总共" + Math.ceil(total / 1024, 1) + "kb，完成" + p + '%');        };        $.fn.design.success = function (picurl, w, h) {//flash中加载图片完成后需要调用的js方法            _pro.parent().hide();            toolbar(true);//显示操作栏            _as.eq(0).attr('href', picurl);//设置原始图片的链接            _pop.css({ top: _ie6 ? $(document).scrollTop() : 0, left: 0 });//将内容层置于左上角            _img.attr('src', picurl).fadeIn(500,function(){Resize();}); //500ms后fadeIn效果显示图片，然后调用Resize方法重置内容层的位置        };        $.fn.design.failure = function (msg) {//flash或者Image对象图片出错时需要调用的js方法            _info.html('<font color="red">' + msg + '</font>　');            if (!_container) _info.css('background', 'none'); toolbar(true, true);        };        var _lightbox, _pop, _toolbar, _as, _img, _tmpImg, _imgSrc='', _pro, _info, _container = null, _ie, _ie6, me = this;        function InitGUI() {//初始化加载图片等待和显示层的GUI            if (!cfg) cfg = {};            if (!cfg.swfID) cfg.swfID = 'swfId';            if (!cfg.swfUrl) cfg.swfUrl = '/images/loadSwf.swf';            if(!cfg.imgLoading)cfg.imgLoading='/images/loading.gif';            if (!/^/d+$/.test(cfg.step)) cfg.step = 100;            _lightbox = $('<div class="lightbox"></div>').appendTo(document.body);//增加lightbox DOM对象            _pop = $('<div class="popdesign"><p>'                    + '<a target="_blank" title="在新窗口中打开" href="#"></a>'                    + '<a title="实际大小" href="#" class="just"></a>'                    + '<a href="#" title="关闭" class="close"></a>'                    + '<span>鼠标滚动缩放图片，按下左键拖动</span></p>'                    + '<img src="javascript:void(0)"/>'                    + '<div class="loading"><div class="pro"></div><div class="info"></div></div></div>').appendTo(document.body);//增加内容层DOM对象            _toolbar = _pop.find('p');//操作栏             _as = _toolbar.find('a'); //操作栏里面的对象            _img = _pop.find('img'); //图片显示容器对象            _pro = _pop.find('div.pro'); //图片加载进度条对象            _info = _pop.find('div.info'); //图片加载信息提示对象                        _ie = !!document.all; //是否为IE浏览器            _ie6 = _ie && /msie [5|6]/i.test(navigator.userAgent);//是否为IE6浏览器            _as.eq(1).click(function () { _img.get(0).style.cssText = ''; _img.css('display', 'block'); return false; });//显示原始图片大小            _as.eq(2).click(function () { show(); return false; });//关闭事件            _tmpImg = new Image(); //无法获取到swf容器对象时使用Image对象加载            _tmpImg.onload = function () { $.fn.design.success(this.src); };//Image对象加载完成事件            _tmpImg.onerror = function () { $.fn.design.failure('文件加载失败！'); };//Image对象加载图片失败事件            if (_ie6) $.Drag.Resize = resizelightbox;//如果为IE6注册层拖动结束事件的Resize回调方法，以便修改lightbox大小            else _pop.addClass('fixed');//如果浏览器支持fixed属性则增加fixed样式            new $.Drag([_img, _pop]);//添加层拖动事件            //增加flash对象，注意swf添加方式            $('<div class="dvswf"></div>').appendTo(document.body).get(0).innerHTML = _ie ? '<object id="' + cfg.swfID + '" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"><param name="src" value="' + cfg.swfUrl + '"></object>' : '<embed id="' + cfg.swfID + '" type="application/x-shockwave-flash" src="' + cfg.swfUrl + '"/>';            //绑定事件            me.bind('click', function () {                if (_container === null) _container = swfContainer();//获取swf容器                show(true);//显示GUI                _imgSrc = this.src.replace('_s', '');//获取实际的图片地址路径，注意本实例小图和大图的文件名相差为是否多“_s”，所以你的大图和小图的名称对应关系不同时，请修改这里                 if (_container) _container.forJS(_imgSrc, '$.fn.design.loading', '$.fn.design.success', '$.fn.design.failure');//调用swf容器注册的回调                else _tmpImg.src = _imgSrc;//获取不到swf容器则使用Image对象加载大图片                return false;            });        }        //docment加载完毕后初始化加载图片等待和显示层的GUI        if (document.readyState == 'complete') InitGUI();//docment对象已经加载完毕        else $(function () { InitGUI(); });//docment对象未加载完毕时则添加ready事件    }})(jQuery);