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-imgWidth；
变量imgLoad=$（“
我知道它不起作用，因为我试图显示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); 

var imgWidth，
imgLoad=$（“
这里的工作示例
您在范围方面没有问题，但在计时方面没有问题。函数外部的
控制台.log（）
确实看到了变量
imgWidth
，因为它在函数外部声明了。它只是没有分配值，所以记录了
未定义的
。值（宽度）加载图像后，将被分配到。加载需要一些时间，但代码不会等待，因此在
imgwidth
获得其值之前，最后一行将被执行

请查看以下内容：

var imgWidth;
var demo = 'demoValue';
var imgLoad = $("<img />");

// attach the event-handler BEFORE you set the src-attribute, otherwise it may happen
// that image is loaded before and the onload-function won't work
imgLoad.on("load", function () {
    imgWidth = this.width;
    // all variables declared outside are visible here
    console.log('inside: ', imgWidth); // --> inside: some px
    consolole.log('inside: ', demo); // --> inside: 'demoValue'
});
imgLoad.attr("src", "Images/animals.jpg");

// all variables declared outside a function are also visible here,
// but this runs before the image has finished loading
console.log('outside: ', imgWidth); // --> undefined only because it has no value at this time
console.log('outside: ', demo); // --> 'demoValue'

// now wait a second using a setTimeout
window.setTimeout(function() {
    // all vars are visible here, but now image is loaded and var imgwidth has got its value
    console.log('outsideLater: ' + imgWidth); // --> some px
    console.log('outsideLater: ' + demo); // --> 'demoValue'
}, 1000);

var-imgWidth；
var demo='demoValue'；
var imgLoad=$（“内部：一些px
consolole.log（'inside:'，demo）；//-->inside:'demoValue'
});
imgLoad.attr（“src”、“Images/animals.jpg”）；
//在函数外声明的所有变量在此处也可见，
//但这将在图像加载完成之前运行
console.log（'outside:'，imgWidth）；//-->未定义，只是因为此时它没有值
console.log（'outside:'，demo）；//-->'demoValue'
//现在使用setTimeout等待一秒钟
setTimeout（函数（）{
//所有变量在这里都是可见的，但现在图像被加载，变量imgwidth得到了它的值
log（'outsideLater:'+imgWidth）；//-->一些px
console.log（'outsideLater:'+demo）；//-->'demoValue'
}, 1000);

因此，结果是：您的var声明是可以的，但是所有应该对图像或其属性执行操作的代码必须在
load
-函数中，否则它将过早运行。
您可以从函数中声明变量（使用“var”）在你的函数/作用域中，你使用这些变量而不使用var=>你将变量声明为全局变量。好吧！我明白了，现在我明白了时间问题。不管怎样，我认为Bojan Petkovski说的主要问题是我也需要在函数之外设置值，因为我没有在函数之外添加任何变量非常感谢！！你们救了我！：）很高兴我能帮上忙：）现在你可以接受答案，这样问题就可以结束了：）