query预加载等比缩放图片并居中显示

<script type="text/javascript">

/*

scaling 是否等比例自动缩放

width 图片最大高

height 图片最大宽

loadpic 加载过程中显示的图片路径

*/

jQuery.fn.LoadImage = function (scaling, width, height, loadpic) {

if (loadpic == null) {

loadpic = "../../Images/loading.gif";

}

return this.each(function () {

var t = $(this);

var src = $(this).attr("src")

var img = new Image();

img.src = src;

var autoScaling = function () {

if (scaling) {

if (img.width > 0 && img.height > 0) {

if (img.width / img.height >= width / height) {

if (img.width > width) {

t.width(width);

t.height((img.height * width) / img.width);

} else {

t.width(img.width);

t.height(img.height);

}

} else {

if (img.height > height) {

t.height(height);

t.width((img.width * height) / img.height);

} else {

t.width(img.width);

t.height(img.height);

}

}

}

//在父容器中居中显示

t.css("margin-left", ($("#" + t.context.parentNode.id).width() - t.width()) * 0.5 + "px");

t.css("margin-top", ($("#" + t.context.parentNode.id).height() - t.height()) * 0.5 + "px");

}

}

//处理ff下会自动读取缓存图片

if (img.complete) {

autoScaling();

return;

}

$(this).attr("src", "");

var loading = $("<img alt=\"加载中\" title=\"图片加载中\" src=\"" + loadpic + "\" />");

t.hide();

t.after(loading);

$(img).load(function () {

autoScaling();

loading.remove();

t.attr("src", this.src);

t.show();

});

});

}

//调用的例子

$("div[id^='divProduct'] img[id^='imgProduct']").LoadImage(true, 396, 300);

$("div[id^='divPhoto'] img").LoadImage(true, 200, 240);

</script>