JS自动缩小超出大小的图片

307 阅读 0 评论 203 点赞

我是靠谱客的博主无语星星，最近开发中收集的这篇文章主要介绍JS自动缩小超出大小的图片，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ 
if(loadpic==null)loadpic="../img/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); 
} 
} 
} 
} 
} 
//处理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(); 
}); 
} ); 
} 
</script> 
<div id="content"><img src="img/20120518073933709.jpg"/></div> 
<script type="text/javascript"> 
<!-- 
$(window).load(function(){ 
$('#content img').LoadImage(true, 600,500,'img/loading.gif'); 
}); 
//--> 
</script> 