如何获取 src 由 jQuery 动态填充的图像的尺寸？

Question

假设我有一个空占位符 标签，我想动态填充它。我调用 $("img").attr("src", "somephoto.jpg") 将元素指向正确的图像。但是，然后我想根据该图像的宽度做一些事情，但是 $("img").width() 和 $("img").attr("width") return 0。

我怎样才能获得图像的宽度——或者更好的是，有没有一种方法可以动态设置图像的src，这是更好的做法并且可以解决我的问题？

Answer 1

我个人会附加整个新图像，而不是使用空的 img 标签的 src 属性。

他们如何返回零？请记住，这两个方法将返回宽度的字符串表示形式，即“10px”，而不是整数 10。

Answer 2

您必须先等待图像加载。

$("img")
  .attr("src", "somephoto.jpg")
  .on("load", function () {
    alert(this.height()+" "+this.width())
  })

我的 jQuery 可能有点生疏了。这是简单的 JS 版本

var i = new Image()
i.src = "somephoto.jpg"
i.onload = function () {
  alert(this.height + " " + this.width)
}