Question

我想循环所有imgs（数百张图片），我想获得图像的宽度。但有时宽度和高度会返回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函数，但它也是一样的。任何知道解决方案的人

Answer 1

当事件在循环中绑定时，您可以使用jQuery one()，因为事件将在每次循环执行时绑定。

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

Answer 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'));
    });
    });

Answer 3

试试这个：

<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-dependency-plugin</artifactId>
            <version>2.10</version>
            <executions>
                <execution>
                    <id>unpack-dependencies</id>
                    <phase>package</phase>
                    <goals>
                        <goal>unpack-dependencies</goal>
                    </goals>
                    <configuration>
                        <excludeTypes>pom</excludeTypes>
                        <includeArtifactIds>application-static</includeArtifactIds>
                        <includeGroupIds>com.foo.foo.application</includeGroupIds>
                        <outputDirectory>src/main/webapp</outputDirectory>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
    <finalName>${project.artifactId}-${project.version}</finalName>
</build>

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

Answer 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>

Answer 5

您必须等到装入图像。

有时Jquery.width（）和.height（）工作错误

5 个答案: