jquery 自动图片的问题
我希望在页面显示时,图片自动绽放大小。我的代码如下:
<script type="text/javascript">
$(function () {
$("#divUserList img").each(function (e) {
var w = $(this).width();
var h = $(this).height();
if (w > 92)
{
$(this).width(92);
}
if (h > 112)
{
$(this).height(112);
}
});
});
</script>
虽然实现了自动缩放,但是页面总是在显示大图之后,再突然缩小,有时候居然有一两张图不自动缩小
请问,如何让页面缩放完成之后,再一并显示呢? --------------------编程问答-------------------- $("#divUserList img").animate({ "width": 92, "height": 112 }, 2000); --------------------编程问答--------------------
$.each(("#divUserList img"),function () {
$(this).css({"width":96,"height",112});
}); --------------------编程问答-------------------- $("#divUserList img")
.animate({height:"112px",width:"92px"},"slow"); --------------------编程问答-------------------- 楼上的这些方法都是强制92px*112px显示图片,而不是图片等比缩放。并且无论是用动画方式还是用CSS方式,都会有一个零点几秒的延时,我想要的是,不要有延时,即时出现图片,而不是屏幕抖一下才缩放。 --------------------编程问答-------------------- 这要处理不好的,页面加载的图片太多了,为何上传的时候不缩放一份小图片呢。
图片等比缩放:
function DrawImage(ImgD,FitWidth,FitHeight){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= FitWidth/FitHeight){
if(image.width>FitWidth){
ImgD.width=FitWidth;
ImgD.height=(image.height*FitWidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
} else{
if(image.height>FitHeight){
ImgD.height=FitHeight;
ImgD.width=(image.width*FitHeight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
<img src="XXXX" alt="自动缩放后的效果" onload="javascript:DrawImage(this,"200","200");" />--------------------编程问答-------------------- 其实你想要的是大图的缩略图效果,你现在的实现方式只是强行让图片缩小,这种方法必须要大图完全加载之后才可以显示图片,所以会出现开始的时候图片很大,等图片加载完成了才会变小。
要想达到你想要的要求的话,可以上传图片时在服务器上生成图片不超过92*112大小的缩略图,你页面上显示的不是原大图,而是经过程序处理后的缩略图。 --------------------编程问答-------------------- // 限制图片大小,自动根据长宽来处理
--------------------编程问答-------------------- 不错!
#region 限制图片大小
//jQuery.fn.ImageAutoSize = function(width,height)
//{
//$(“img”,this).each(function()
//{
//var image = $(this);
//if(image.width()>width)
//{
//image.width(width);
//image.height(width/image.width()*image.height());
//}
//if(image.height()>height)
//{
//image.height(height);
//image.width(height/image.height()*image.width());
//}
//});
//}
//调用:先引用上面的脚本或将上页的脚本放入自己的JS库,然后只要再加 $(function(){ $(“图片组所在的容器”).ImageAutoSize(限制最大宽,限制最大高);});
#endregion
mark~ --------------------编程问答-------------------- 可以先把图片用CSS隐藏,加载后不显示;缩放完成后再显示出来。
不过服务器端返回前先设置图片的格式为指定大小不是更方便。
补充:.NET技术 , ASP.NET