0

我正在根据我在此处找到的解决方案将图像加载到内存中，这很好，但由于它在回调中，因此属性宽度和高度在它之外是未定义的。

var originalWidth, originalHeight;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        originalWidth = this.width;   // Note: $(this).width() will not
        originalHeight = this.height; // work for in memory images.
    });
console.log(originalWidth); // undefined obviously since `this` is only accessible within `load`s callback.

我想也许把它放在一个像这样的对象中：

var originalWidth, originalHeight;
var imgDimensions = {};
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        imgDimensions.originalWidth = this.width;   // Note: $(this).width() will not
        imgDimensions.originalHeight = this.height; // work for in memory images.
    });
console.log(imgDimensions['originalWidth']); // undefined also

如何从 load() 中返回这些属性？

4

3 回答 3

2

在console.log加载函数触发之前执行，因此originalWidth尚未更新。

于 2012-11-02T21:35:46.047 回答
1

由于您不知道也无法控制回调何时运行，因此您无法保证该值可用于您的日志调用。

根据您要对维度执行的操作，一种解决方案可能是将 onload 事件处理程序添加到您的 img 标记，以便您可以在项目实际加载后访问这些值。

于 2012-11-02T21:41:07.153 回答
0

如果你console.log()从回调中调用，你应该得到一个有用的结果：

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

正如其他人所解释的，.load()回调将在未来某个未指定的时间执行。在此之前尝试使用 imgDimensions 变量是没有意义的。

于 2012-11-02T22:47:36.013 回答