WEB前端开发

做相册功能的时候经常会碰到这样一个问题，就是用户上传的照片尺寸，比例是很不固定的，如果是大图片经常会把页面撑开，即使你用了等比缩放。也要等图片加载完成，这是非常折磨人的。

 这是一段网上找的代码，在Body标签中加入onload=”ReImgSize”进行调用：

 function ReImgSize() {
    var await = document.getElementById("Imgbox"); //定义要改变的图片的容器ID
    var imgall = await.getElementsByTagName("img"); //取得容器内所有的IMG标签
    for (i = 0; i < imgall.length; i++) {
        if (imgall[i].width > 500) //如果图片的宽度大于500
        {
            var oWidth = imgall[i].width; //取得图片的实际宽度
            var oHeight = imgall[i].height; //取得图片的实际高度
            imgall[i].width = "500"; //重设图片的宽度为500
            imgall[i].height = oHeight * 500 / oWidth; //重设图片的高度
        }
    }
}

但是这里仍有很多不人性的地方，碰到大图片的时候，加载是非常折磨人的事情。
(转载请注明出处：WEB前端开发 http://www.css88.com/)

这里找了一个jquery的LoadImage插件，自己做了少许的修改：

这个JQ插件的代码

/*
///来源 <a href="http://wwww.css88.com">http://wwww.css88.com</a>
///参数设置：
scaling     是否等比例自动缩放
width       图片最大高
height      图片最大宽
loadpic     加载中的图片路径
*/
(function($) {
    jQuery.fn.LoadImage = function(settings) {
        settings = jQuery.extend({
            scaling: true,
            width: 500,
            height: 500,
            loadpic: ""
        },
        settings);
        return this.each(function() {
            $.fn.LoadImage.Showimg($(this), settings);
        });
    };
    $.fn.LoadImage.Showimg = function($this, settings) {
        var src = $this.attr("src");
        var img = new Image();
        img.src = src;
        var autoScaling = function() {
            if (settings.scaling) {
                if (img.width > 0 &amp;&amp; img.height > 0) {
                    if (img.width / img.height >= settings.width / settings.height) {
                        if (img.width > settings.width) {
                            $this.width(settings.width);
                            $this.height((img.height * settings.width) / img.width);
                        }
                        else {
                            $this.width(img.width);
                            $this.height(img.height);
                        }
                    }
                    else {
                        if (img.height > settings.height) {
                            $this.height(settings.height);
                            $this.width((img.width * settings.height) / img.height);
                        }
                        else {
                            $this.width(img.width);
                            $this.height(img.height);
                        }
                    }
                }
            }
        }
        $this.attr("src", "");
        var loading = $("<img alt=\"图片加载中..\" title=\"图片加载中...\" src=\"" + settings.loadpic + "\" />");
        $this.hide();
        $this.after(loading);
        $(img).load(function() {
            autoScaling();
            loading.remove();
            $this.attr("src", this.src);
            $this.show();

        });
    }
})(jQuery);

这个是调用的方法：

$(function(){
 $("img").LoadImage({scaling : true,
   width : 500,
   height : 200,
   loadpic:"loading.gif"});
});

查看demo：http://www.css88.com/demo/jQuery/LoadImage/demo.htm
(转载请注明出处：WEB前端开发 http://www.css88.com/)

另：其实如果没有IE6我们直接可以使用一个css属性就可以搞定这些复杂的工作，那就是max-width；

例如：img{max-width:500px;}

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《【jQuery插件】等比例缩放图片浏览-LoadImage》