js jquery 处理图片不变形 图片加载完成

/**
 * 设置显示比例大小
 * @param imgObj img juqery对象
 */
function setImgSize(imgObj){
    
    var img= $(imgObj)[0];    //JQUERY 对象 转成DOM对象
    if(!img.complete){  //判断图片是否加载完成
        if(img.addEventListener){    //兼容其他浏览器
            img.addEventListener('load',function(){
                setImgSizeFun(img);
            },false);
        } else {
            img.attachEvent("onload",function (){
                setImgSizeFun(img);
            });  
        }
        
    }
    else{
        setImgSizeFun(img);
    }
}

/**
 * 设置图片大小函数
 * @param imgObj
 */
function setImgSizeFun(imgObj){
    //将图片进行居中处理
    var cssmaxheight = $(imgObj).attr("pheight");
    var cssmaxwidth = $(imgObj).attr("pwidth");    
    
    var imgWidth = $(imgObj).width();
    var imgHeight = $(imgObj).height();
    $(imgObj).attr("currwidth",imgWidth);    
    $(imgObj).attr("currheight",imgHeight);
    
    if(cssmaxheight&&cssmaxwidth){
        
        var intmaxheight = parseInt(cssmaxheight);
        var intmaxwidth = parseInt(cssmaxwidth);
        
        if(imgHeight/intmaxheight < imgWidth/intmaxwidth){    //需要判断下比例,按比例小的设置
            var imgCompressWidth = Math.round(intmaxheight/imgHeight*imgWidth);
            $(imgObj).css("width",imgCompressWidth);
            $(imgObj).css("height",intmaxheight);
            $(imgObj).css("margin-left",(intmaxwidth-imgCompressWidth)/2+"px");
            
        } else {
            var imgCompressHeight = Math.round(intmaxwidth/imgWidth*imgHeight);
            $(imgObj).css("width",intmaxwidth);
            $(imgObj).css("height",imgCompressHeight);
            $(imgObj).css("margin-top",(intmaxheight-imgCompressHeight)/2+"px");
        }
        var parentComp = $(imgObj).attr("parentComp");
        if(parentComp)
            $(imgObj).closest(parentComp).css("overflow","hidden");
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值