Javascript。 为什么此代码不起作用？

Question

I can not call the property height:

When I call the height property, the message get 0. But it should give me 1152.

var fondoJuego=new FondoJuego();
fondoJuego.setFondoSrc("tituloNV.png");
alert("Altura "+fondoJuego.getFondo().height);

var FondoJuego=function(){
            this.fondo=new Image();
            this.getFondo=function(){
                return this.fondo;
            };
            this.getFondoSrc=function(){
                return this.fondo.src;
            };
            this.setFondo=function(fondoAux){
                this.fondo=fondoAux;
            };
            this.setFondoSrc=function(fondoSrcAux){
                this.fondo.src=fondoSrcAux;
            };
        };

Thanks

Answer 1

This happens because of the image takes some time to load in a async fashion

Let's take Google's Doodle as an example:

var imageAsync = new Image();
imageAsync.src = "https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?t=" + (+new Date);
console.log(imageAsync.height);

var imageSync = new Image();
imageSync.src = "https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?t=" + (+new Date);
imageSync.onload = function () {
  console.log(this.height);
}

Returns 0 and 92.

Answer 2

You will need to listen to the load event.

This should work:

function getHeight() {
    alert("Altura " + fondoJuego.fondo.height );
    return true;
}

var FondoJuego = function() {

    this.fondo = new Image();

    this.fondo.addEventListener("load", function(){
        getHeight();
    });

    this.getFondo=function(){
        return this.fondo;
    };

    this.getFondoSrc=function(){
        return this.fondo.src;
    };

    this.setFondo=function(fondoAux){
        this.fondo=fondoAux;
    };

    this.setFondoSrc=function(fondoSrcAux){
        this.fondo.src=fondoSrcAux;
    };
};

var fondoJuego = new FondoJuego();

fondoJuego.setFondoSrc("tituloNV.jpg");

check this jsfiddle: https://jsfiddle.net/dm7dqajf/