JQuery-为每个具有类的img元素添加css

$(document).ready(function() { 
    $("img.resizeImage").each(function(){ 
     var img = $(this); 
     var width = $(this).width(); // Current image width 
     var height = $(this).height(); // Current image height 
     // alert("give image size ....."+width+", "+height); 
     var pic_real_width, pic_real_height; 
     $("<img/>").attr("src", $(img).attr("src")) 
      .load(function() { 
       pic_real_width = this.width; 
       pic_real_height = this.height; 

      }); 

     if(pic_real_width < width ){ 
      //alert("display original width.sssss 103.."); 
      $(this).removeAttr("width"); 
      $(this).css("width",pic_real_width); 
     } 

     if(pic_real_height < height){ 
      //alert("display original height ss.102.."); 
      $(this).removeAttr("height"); 
      $(this).css("height",pic_real_height); 
     } 
    }); 
});

在上面的jQuery执行流程中，如果条件不匹配，我没有获得期望的结果。如果我在两个if（）s之上保留一些警报，那么执行流程会在两个条件之内进入。 pl帮助我。如何可以逐行执行jquery语句..JQuery-为每个具有类的img元素添加css

来源

2012-04-24 MadhuB

您的图像加载是异步的，这意味着.load回调不会马上被调用。

因此，pic_real_width和pic_real_height在您尝试使用它们时未知。

也许你应该将这两个条件转换成的回调函数？

来源

2012-04-24 09:53:54 Alnitak

那么我怎样才能得到每个img元素的原始高度和宽度没有负载。任何其他解决方案。我想要的是如果图像小于给定的高度和宽度我不希望它被拉伸，以原始高度和宽度显示图像。 – MadhuB 2012-04-24 10:10:38

而不是检查图像大小和删除高度/宽度如果图像较小，为什么不尝试最大高度和最大宽度的CSS属性？ img {max-width：100px;}将导致图像永远不会被拉伸，而较大的图像永远不会超过100像素的宽度。 – 2012-04-24 10:17:13

谢谢。我可以使用最大宽度和最大高度。 – MadhuB 2012-04-26 09:07:32

JQuery-为每个具有类的img元素添加css

回答

相关问题