jQuery扩展loadthumb，用jQuery实现图片预加载和等比例缩小

/**/ /*
 * jQuery插件：
 * 图片预加载
 * 重置图片宽度，高度
 * 图片水平，垂直居中
 * Dev By CssRain.cn
 */
jQuery.fn.loadthumb  =   function (options)  {
    options = $.extend({
         src : "",
         imgId : "myImgs",
         parentId : "CRviewer"
    },options);
    var _self = this;
    _self.hide();
    var img = new Image();
    $(img).load(function(){
        imgDem = {};
        imgDem.w  = img.width;
        imgDem.h  = img.height;
        imgDem = $.imgResize({"w": $("#"+options.parentId).width() ,"h": $("#"+options.parentId).height()},{"w":imgDem.w,"h":imgDem.h});
        var imgMargins = $.imgCenter({"w": $("#"+options.parentId).width() ,"h": $("#"+options.parentId).height()},{"w":imgDem.w,"h":imgDem.h});
        $("#"+options.imgId).css({width:imgDem.w,height:imgDem.h,marginLeft:imgMargins.l,marginTop:imgMargins.t});
        _self.attr("src", options.src);
        _self.fadeIn("slow");
    }).attr("src", options.src);  //.atte("src",options.src)要放在load后面，
    return _self;
}
// 重置图片宽度，高度插件 ( parentDem是父元素，imgDem是图片 )
jQuery.imgResize  =   function (parentDem,imgDem) {
    if(imgDem.w>0 && imgDem.h>0){
        var rate = (parentDem.w/imgDem.w < parentDem.h/imgDem.h)?parentDem.w/imgDem.w:parentDem.h/imgDem.h;
        //如果 指定高度/图片高度  小于  指定宽度/图片宽度 ，  那么，我们的比例数 取 指定高度/图片高度。
        //如果 指定高度/图片高度  大于  指定宽度/图片宽度 ，  那么，我们的比例数 取 指定宽度/图片宽度。
        if(rate <= 1){   
            imgDem.w = imgDem.w*rate; //图片新的宽度 = 宽度 * 比例数
            imgDem.h = imgDem.h*rate;
        }else{//  如果比例数大于1，则新的宽度等于以前的宽度。
            imgDem.w = imgDem.w;
            imgDem.h = imgDem.h;
        }
    }
    return imgDem;
}
// 使图片在父元素内水平，垂直居中，( parentDem是父元素，imgDem是图片 )
jQuery.imgCenter  =   function (parentDem,imgDem) {
    var left = (parentDem.w - imgDem.w)*0.5;
    var top = (parentDem.h - imgDem.h)*0.5;
    return { "l": left , "t": top};
}

 

以上网站系列中常用的图片预加载以及控制图片等比例缩小技术。

我将此技术用到了小图 显示大图， 效果还可以。
通过这个插件你可以 完成更多的 效果，比如图片相册，幻灯片 等等。。。
期待更多朋友利用此插件开发更多效果。
演示：
http://cssrain.cn/demo/preloadimages/preload.html

下载：

http://cssrain.cn/demo/preloadimages/preloadimages.rar

 注意上面下载的代码中jquery.loadthumb.js的默认编码为gb2312，在IE中会受到编码的影响而变形。
所以附上格式化为utf-8格式后的jquery.loadthumb.js,也许大多数人并没有注意到，但是编码的影响是很难察觉的，毕竟页面变形首先想到的是css出问题了，然后是js脚本兼容性做的不好，如果按照这个思路找的话，3-4小时够你受的。