Question

我认为一个简单的问题，但我找不到任何解决方案。我需要从尚未加载的图像中获取图像尺寸，但不知道如何。

我有以下html

<a href="http://domain.com/folder/bigImage.jpg" id="someID">
 <img src="http://domain.com/folder/smallImage.jpg">
</a>

现在我想获得大图像的图像尺寸，但是如何？


$("#someID").click(function(event){
 event.preventDefault();
 image = this.href;
 newImage = new Image();
 newImage.src = image;
 alert(newImage.width);
});

或


$("#someID").click(function(event){
 event.preventDefault();
 image = this.href;
 newImage = new Image();
 newImage.src = image;
 newImage.load(function(){
  alert(newImage.width);
 });
});

两者都不起作用

Answer 1

.load()是一个jQuery函数，因此您需要一个包装器，并在设置src之前将其绑定到，如下所示：

$("#someID").click(function(event){ event.preventDefault(); var newImage = new Image(); $(newImage).load(function(){ alert(this.width); }); newImage.src = this.href; });

Answer 2

你的第二个例子很接近;您需要先等待图像加载，然后才能检索图像的尺寸。

$('#someId').bind('click', function (event) {
  var image = new Image();
  image.onload = function () {
    var height = this.height;
    var width = this.width;

    alert(height + " | " + width);
  }
  image.src = this.href;

  event.preventDefault();
});

你可以在这里看到一个工作小提琴：http://www.jsfiddle.net/JsRmU/

获取图像尺寸

2 个答案: