以上网站系列中常用的图片预加载以及控制图片等比例缩小技术。
我将此技术用到了小图 显示大图, 效果还可以。
通过这个插件你可以 完成更多的 效果,比如图片相册,幻灯片 等等。。。
期待更多朋友利用此插件开发更多效果。
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
/**//*
* jQuery插件:
* 图片预加载
* 重置图片宽度,高度
* 图片水平,垂直居中
* Dev By CssRain.cn
*/
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
jQuery.fn.loadthumb = function(options)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
options = $.extend(
{
src : "",
imgId : "myImgs",
parentId : "CRviewer"
},options);
var _self = this;
_self.hide();
var img = new Image();
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$(img).load(function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
imgDem =
{};
imgDem.w = img.width;
imgDem.h = img.height;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
imgDem = $.imgResize(
{"w": $("#"+options.parentId).width() ,"h": $("#"+options.parentId).height()},
{"w":imgDem.w,"h":imgDem.h});
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var imgMargins = $.imgCenter(
{"w": $("#"+options.parentId).width() ,"h": $("#"+options.parentId).height()},
{"w":imgDem.w,"h":imgDem.h});
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$("#"+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是图片 )
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
jQuery.imgResize = function(parentDem,imgDem)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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;
//如果 指定高度/图片高度 小于 指定宽度/图片宽度 , 那么,我们的比例数 取 指定高度/图片高度。
//如果 指定高度/图片高度 大于 指定宽度/图片宽度 , 那么,我们的比例数 取 指定宽度/图片宽度。
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(rate <= 1)
{
imgDem.w = imgDem.w*rate; //图片新的宽度 = 宽度 * 比例数
imgDem.h = imgDem.h*rate;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{// 如果比例数大于1,则新的宽度等于以前的宽度。
imgDem.w = imgDem.w;
imgDem.h = imgDem.h;
}
}
return imgDem;
}
//使图片在父元素内水平,垂直居中,( parentDem是父元素,imgDem是图片 )
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
jQuery.imgCenter = function(parentDem,imgDem)
{
var left = (parentDem.w - imgDem.w)*0.5;
var top = (parentDem.h - imgDem.h)*0.5;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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小时够你受的。