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);