Question

我按照我在这里找到的解决方案将图像加载到内存中，这很好，但由于它在回调中，因此属性宽度和高度在其外部未定义。

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（）中返回这些属性？

Answer 1

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

Answer 2

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

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

Answer 3

如果您在回调中调用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变量毫无意义。

从回调中访问属性

3 个答案: