Question

我正试图获得图像的宽度和高度，如下所示：

<ul class="gallery">
  <li><a href="#"><img src="#"></a></li>
  <li><a href="#"><img src="#"></a></li>
  <li><a href="#"><img src="#"></a></li>
  <li><a href="#"><img src="#"></a></li>
</ul>

我按照以下方式完成了这个jquery代码：

$(document).ready(function(){
  $(".gallery").find("li a").each(function() {
    alert($(this).find("img").width() + 'x' + $(this).find("img").height());
  });
});

由于某种原因，我一直得到0x0，我想要的只是ul li a中每个图像的宽度和高度。

我还读到我需要做以下事情：

$('.gallery li a img').load(function() {
  var $img = $(this);
  $img.parent().width($img.width());
});

因为document.ready在image.load之前被触发，但它仍无效。

任何帮助将不胜感激。谢谢。

Answer 1

您应该可以在window.load事件中执行此操作：

$(window).load(function(){
 $(".gallery").find("li a").each(function () {
     console.log($(this).find("img").width() + 'x' + $(this).find("img").height());
 });
});

请参阅window.load和document.ready here：window.onload vs $(document).ready()

之间的区别

<强> jsFiddle example

Answer 2

$(".gallery img").on("load", function () {
    var $this = $(this);
    console.log($this.width() + "x" + $this.height());
}).each(function () {
    if (this.complete) {
        $(this).trigger("load");
    }
});

在ul li中获取img的宽度

2 个答案: