在IE中使用透明PNG图片

众所周知IE对PNG的支持是有bug的，但使用GIF时则会有毛边，不爽。今天在网上溜达时发现原来可以通过滤镜来迂回解决。

/**
 * 加载PNG，当，仅当在IE中呈现时调用
 * @param {string} 图象路径,不能为空
 * @callback {function} 当加载完成时发生的事件
 */
loader.loadPNG = function(url, callback){
    if(url){
        if(url.toUpperCase().indexOf(".PNG") > 0 && Ext.isIE){
            var img = new Image();
            img.src = url;
            
            img.onreadystatechange = function(){
                if(this.readyState == "complete" || this.readyState == "loaded"){
                    this.onreadystatechange = null;

                    var w = this.width;
                    var h = this.height;
                    this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='image')";
                    this.src = "resources/images/pngblank.gif";//
                    //如果不设置width和height并不影响图片的呈现，但在进行dom操作时，获取的width就不指定url图象的width了
                    this.width = w;
                    this.height = h;

                    if(callback)
                        Ext.callback(callback, this);
                }
            }
        }
        else{
            var img = new Image();
            img.src = url;
            if(callback)
                Ext.callback(callback, img);
        }
    }
};

使用也很简单

Map2008.loader.loadPNG("resources/images/logo.png", function(){
    document.body.appendChild(this);
});

需要的朋友可以从这里下载。