Javascript 如何从onload保存图像宽度和高度？

我有一个

元素数组，我正试图将其制作成一个旋转木马，只是我希望如果图像大于640x480，则调整其大小，并将其居中放置在帧中

我有以下代码： HTML:

然后，我使用

itemSources[I]

、

imW[I]

和

imH[I]

调整图像大小，并添加任何必要的填充以使其在帧中居中

如果我的互联网足够快，并且在计算大小之前加载图像，那么这一切都很好。（哈！）

我知道我想要的是：

var img = new Image();
img.onload = function() {
    console.log(this.width + 'x' + this.height);
};
img.src = $(this).find('img').attr('src');

---

但是我不能保存宽度和高度，因为仅仅推到数组会超出范围，为此创建外部回调也会超出范围。如何将那些如此容易打印到控制台的大小保存到imW和imH阵列中？

您基本上可以设置图像的属性，例如

data load=“true”

一旦加载图像，当加载最后一幅图像时，您就可以迭代图像并加载阵列

在

onload

方法中，执行以下更改

var img = new Image();
img.onload = function() {
    console.log(this.width + 'x' + this.height);

    //set this attribute to indicate that this image has been loaded already
    $(this).attr( "data-loaded", "true" );

    //check if all images have this attribute
    if ( $( "img[data-loaded='true']" ).size() == $( "img" ).size() ) 
    {
      //now iterate the images to load your array
    }
};
img.src = $(this).find('img').attr('src');

---

您基本上可以设置图像的属性，类似于加载图像后的

data load=“true”

，当加载最后一个图像时，您可以迭代图像并加载数组

在

onload

方法中，执行以下更改

var img = new Image();
img.onload = function() {
    console.log(this.width + 'x' + this.height);

    //set this attribute to indicate that this image has been loaded already
    $(this).attr( "data-loaded", "true" );

    //check if all images have this attribute
    if ( $( "img[data-loaded='true']" ).size() == $( "img" ).size() ) 
    {
      //now iterate the images to load your array
    }
};
img.src = $(this).find('img').attr('src');

---

将这些值放入数组后，您需要如何处理它们？您基本上可以设置图像的属性，例如

data load=“true”

加载图像后，当加载最后一幅图像时，您可以迭代图像并加载阵列。我在渲染旋转木马时正在使用这些图像来调整图像大小并添加填充（左/上），以便在其中一幅图像尺寸较小时，图像居中显示。将这些值放入数组后，您需要如何处理它们？您基本上可以设置图像的属性，例如

data load=“true”

加载图像后，当加载最后一幅图像时，您可以迭代图像并加载阵列。我在渲染旋转木马时正在使用这些图像来调整图像大小并添加填充（左/上），这样，如果其中一幅图像尺寸较小，图像将居中显示。我无法实现这一点，在加载带有

$（窗口）的窗口之前，我只是等待加载所有图像。在（“加载”，function（）{

，虽然有点明显的事情正在发生…我无法让它工作，但在加载带有

$（窗口）的窗口之前，我只是等待加载所有图像。在（“加载”，function（））{

，虽然有点明显的事情正在发生。。。

var img = new Image();
img.onload = function() {
    console.log(this.width + 'x' + this.height);

    //set this attribute to indicate that this image has been loaded already
    $(this).attr( "data-loaded", "true" );

    //check if all images have this attribute
    if ( $( "img[data-loaded='true']" ).size() == $( "img" ).size() ) 
    {
      //now iterate the images to load your array
    }
};
img.src = $(this).find('img').attr('src');