有时 Jquery.width() 和 .height() 工作错误[重复]答案

【问题标题】：Sometimes Jquery.width() and .height() working wrong [duplicate]有时 Jquery.width() 和 .height() 工作错误[重复]
【发布时间】：2015-12-16 13:40:28
【问题描述】：

我想循环所有imgs（数百张图像），我想获得图像的宽度。但有时 width 和 height 返回 0 或其他错误。

代码

$('img').each(function(){
    var image = jQuery(this);
    $(this).load(function(){
        var width = img.width(), height=img.height();

        //do something with width and height
    })

})

我尝试了jquery.load 和 window.load 函数，但它也是一样的。任何知道解决方案的人

【问题讨论】：

如果图片已经加载了怎么办？
你为什么用ajax，你在哪里定义了img变量？
为此尝试window.load 方法。加载完所有图像后，它将触发。
img.width() ? img 将未定义
@Alorika 我也使用了 window.load 但它是一样的。

标签： javascript jquery html css

【解决方案1】：

在循环中绑定事件时可以使用jQueryone()，因为每次循环执行时都会绑定事件。

$('img').each(function(){
    $(this).one('load', function(){
         console.log('W:'+this.width+', H:'+this.height)
    });
});

【讨论】：

【解决方案2】：

试试：

$(function(){
$('img').each(function(i,v){
  console.log($(v).width(),$(v).height());
});
});

或：

  $(function(){
    $('img').each(function(i,v){
      console.log($(v).css('width'),$(v).css('height'));
    });
    });

【讨论】：

【解决方案3】：

试试这个：

$('img').each(function() {
  _this = $(this);
  _this.load(function() {
    var width = _this.width(),
      height = _this.height();
    console.log(width);
    console.log(height);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img src='https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'>
<img src='https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'>
<img src='https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'>
<img src='https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'>

【讨论】：

我也用过。但有时工作，有时不工作。实时博客是 tag-test-super-star.c9users.io 和 jsfiddle.net。 jsfiddle.net/jengge/xhjvvhu2/1
你必须提供这些场景..

【解决方案4】：

try this   

 <!DOCTYPE html>
    <html>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <script>
    $(function(){
     $("img").each(function(){
       alert($(this).attr("width"));
       alert($(this).attr("height"));
    });
    })
    </script>
    <body>

    <img src="smiley.gif" alt="Smiley face" width="42" height="42">
    <img src="smiley.gif" alt="Smiley face" width="43" height="42">
    <img src="smiley.gif" alt="Smiley face" width="44" height="42">
    <img src="smiley.gif" alt="Smiley face" width="45" height="42">


    </body>
    </html>




<!DOCTYPE html>
<html>
<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>

<script>
$(function(){
 $("img").each(function(){
   alert("height:"+$(this).css("height") +"\t width:"+$(this).css("width"));

});
})
</script>
<body>

<img src="smiley.gif" alt="Smiley face" style="width:42px;height:48px">
<img src="smiley.gif" alt="Smiley face" style="width:45px;height:100px">
<img src="smiley.gif" alt="Smiley face" style="width:46px;height:46px">
<img src="smiley.gif" alt="Smiley face" style="width:48px;height:40px">
</body>
</html>

【讨论】：

【解决方案5】：

您必须等到图像加载完毕。

【讨论】：

为什么要为这个问题开悬赏？？？