【jQuery插件】等比例缩放图片浏览-LoadImage

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

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

[code=”javascript”]

?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; //重设图片的高度
}
}
}[/code]

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

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

这个JQ插件的代码

[code=”javascript”]

/*
///来源 http://wwww.css88.com
///参数设置:
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 && 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 = $(“\"图片加载中..\"“);
$this.hide();
$this.after(loading);
$(img).load(function() {
autoScaling();
loading.remove();
$this.attr(“src”, this.src);
$this.show();

});
}
})(jQuery);[/code]

这个是调用的方法:

[code=”javascript”]

$(function(){
?$(“img”).LoadImage({scaling : true,
???width : 500,
???height : 200,
???loadpic:”loading.gif”});
});[/code]

查看demo:https://www.html.cn/demo/jQuery/LoadImage/demo.htm
(转载请注明出处:WEB前端开发 https://www.html.cn/)

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

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

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【jQuery插件】等比例缩放图片浏览-LoadImage

评论 9

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    楼主有没有仔细测试过啊,这样的也好意思放出来,连最起码的IE jquery load的错误都没解决,第一次打开IE,根本就不会加载图片。。。

    lbfmin9年前 (2009-10-12)回复
  2. #-48

    @lbfmin
    请看的仔细一点,谢谢!

    9年前 (2009-10-12)回复
  3. #-47

    你这是一个图片,是可以,多个不一样的图片呢?

    lbfmin9年前 (2009-10-12)回复
  4. #-46

    其实是onload 本域文件,不需要任何时间造成的,虽然发布网站后可以运,但是在开发时候会有问题。

    lbfmin9年前 (2009-10-12)回复
  5. #-45

    这个可能有些帮助。
    http://stackoverflow.com/questions/1114299/jquery-img-load-question

    lbfmin9年前 (2009-10-12)回复
  6. #-44
  7. #-43

    这个可完全解
    http://www.cssrain.cn/article.asp?id=1321

    lbfmin9年前 (2009-10-12)回复
  8. #-42

    你的这个方法不错,不过有一个严重的BUG,网页会执行两次,可怕,我一句句的找,发现在
    $this.attr(“src”, “”);
    var loading = $(“”);
    删除$this.attr(“src”, “”);问题就解决了

    jiaoguo9年前 (2010-05-01)回复
  9. #-41

    谢谢楼主分享

    journey7年前 (2011-11-03)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏