Question

我遇到了jQuery的问题。

我想获得img的实际宽度/高度现在我用这个函数得到它：

var imageSize = function(image) {
    var realImageSize = { };

    $("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(image).attr("src"))
    .load(function() {
        realImageSize.width = this.width;   // Note: $(this).width() will not
        realImageSize.height = this.height; // work for in memory images.

        alert(realImageSize['height']); // Valid height
    });

    alert(realImageSize['height']); // Undefined

    return realImageSize;
}

所以我在内存中复制图像，然后在.load方法中获取并设置图像的实际大小。

现在，问题在于var realImageSize变量由于某种原因在此范围内不可用。谁能告诉我为什么？

Answer 1

这不是范围问题，它很好，但是同步问题：你在执行加载回调之前读取了这个值。

您作为load参数提供的回调不会立即执行，而是仅在图片加载后执行。

通常的解决方案是不返回值但提供回调：

var fetchImageSize = function(image, callback) {
    $("<img/>") // Make in memory copy of image to avoid css issues
    .load(function() {
        var realImageSize = { };
        realImageSize.width = this.width;   // Note: $(this).width() will not
        realImageSize.height = this.height; // work for in memory images.
        callback(realImageSize);
    }).attr("src", image.src);
};

fetchImageSize(myImage, function(realImageSize){
    alert(realImageSize['height']); // NOT Undefined
});

请注意，在设置onload回调后，应始终设置src 。某些浏览器，如果您在缓存中有图像，如果在设置源后设置它，则可能不会调用onload回调。

Answer 2

在加载功能完成之前调用第二个警报。使用回调...

试试这个

var imageSize = function(image,callback) {
  var realImageSize = { };

  $("<img/>") // Make in memory copy of image to avoid css issues
  .attr("src", $(image).attr("src"))
  .load(function() {
    realImageSize.width = this.width;   // Note: $(this).width() will not
    realImageSize.height = this.height; // work for in memory images.

    alert(realImageSize['height']); // Valid height
    callback(realImageSize);
  });


}

imageSize(img, function(realImageSize) {
   alert(realImageSize.height);
});

Answer 3

使用回调。其他答案正在解释异步的东西，我不再重复： - ）

var imageSize = function(image, callback) {
.
.
.
    .load(function() {
        realImageSize.width = this.width;   // Note: $(this).width() will not
        realImageSize.height = this.height; // work for in memory images.

        callback(realImageSize);
    });

然后，您可以像这样调用函数：

imageSize(img, function(size) {
    alert(size.height);
});

Answer 4

对于来自其他语言的Javascript程序员来说，这是一个常见问题。 Javascript使用称为异步调用的执行模型。简而言之，当您为.load()事件注册函数时，函数的执行将在图像加载时延迟到而函数体的其余部分（即。第二个alert()）立即执行：

函数中的jQuery变量范围

4 个答案: