javascript - 在加载和就绪事件之前将图像大小获取到全局变量中

Question

我在尝试获取图像宽度并将其保存到全局变量时遇到问题

我现在正在做这个

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 的宽度和高度。我在将来的函数中需要图像宽度和图像高度，所以这就是为什么我需要将其至少保存到全局变量中。

如何解决？

非常感谢

Answer 1

正如你所知道的，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/