this.image.width/number yield 0

Question

我想要使用图像宽度来计算一个精灵的宽度，但是这个数字总是为0，为什么？

function SpriteSheet(image, numFramesX, numFramesY, totalFrames) { 
    this.image = image; 
    this.numFramesX = numFramesX; 
    this.numFramesY = numFramesY; 
    this.totalFrames = totalFrames; 

    this.spriteWidth = this.image.width/this.numFramesX; 
    this.spriteHeight = this.image.height/this.numFramesY; 
} 

image.onload = function() { 
console.log('Image has been loaded'); 
} 
image.src = 'dance.png'; 
spritesheet = new SpriteSheet(image, 8, 10, 80); 

spritesheet.spriteWidth和spritesheet.spriteHeight总是产生0。我垄断了问题“this.image.width”，因为它的工作原理，如果我把在图像的宽度手动。

this.spriteWidth = 880/this.numFramesX; 

，而不是

this.spriteWidth = this.image.width/this.numFramesX; 

，如果我使用控制台对象计算的话它也可以工作：

spritesheet.image.width/spritesheet.numFramesX 

产生110

jsfiddle

Answer 1

如何一回合呢？

window.onload = function() { 
    console.log('Image has been loaded'); 
    image.src = 'dance.png'; 
    spritesheet = new SpriteSheet(image, 8, 10, 80); 
}