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>