javascript - 获取 ul li a 内部 img 的宽度

Question

我正在尝试获取 ul li a 内图像的宽度和高度，如下所示：

<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 之间的区别：window.onload vs $(document).ready()

jsFiddle 示例

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");
    }
});