javascript - 在加载和就绪事件之前将图像大小放入全局变量

尝试获取图像宽度并将其保存到全局变量中时出现问题

我在做这件事

var imgWidth;

var imgLoad = $("<img />");

imgLoad.attr("src", "Images/animals.jpg");
imgLoad.off("load");
imgLoad.on("load", function () {

  imgWidth = this.width;

  console.log(imgWidth); // It works! Inside function scope

});


console.log(imgWidth); // It doesn't work! Outside function scope

我知道它不起作用，因为我试图显示超出var设置范围的值。

该图像将不会显示，我只需要使用src的宽度和高度即可。在将来的函数中，我将需要图像宽度和图像高度，因此这就是为什么我需要至少将其保存到全局变量中。

我该如何解决？

非常感谢你

最佳答案

因为有了imgWidth，所以它在函数外是未定义的，因为它只是一个空变量，因此您无需添加任何内容，而只是在顶部声明它。要使其正常工作，您需要执行以下操作

var imgWidth,
    imgLoad = $("<img />");

imgLoad.attr("src", "http://www.gettyimages.com/CMS/Pages/ImageCollection/StaticContent/image5_170127819.jpg");

imgLoad.on("load", function () {
  imgWidth = this.width;
  console.log('Inside Function:'+imgWidth);
});

imgWidth = imgLoad[0].width;
console.log('Outside Function:'+imgWidth);

这里的工作示例http://jsfiddle.net/kanzvoap/