当前位置:编程学习 > C#/ASP.NET >>

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
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,