JavaScript Image object inside "class"

Question

Good afternoon, I am playing a little in javascript and I have a "class" of this form:

var Card = function(url,c){
            ...
            this.img = new Image();
            this.widthCurr = 0;
            this.heightCurr = 0;
            this.img.onload = this.imageLoaded()
            this.img.src = this.url;
        };

and a method defined as

Card.prototype = {
            imageLoaded : function(){
                //my goal is to initialize this.widthCurr and this.heightCurr
                console.log(this.img.width);
            },

            ...
        };

Basically my goal is to initialize widthCurr and heightCurr with actual width and height of img, when the img is loaded. I created new object and console.log command in imageLoaded keeps saying "0" so at that time, image is not loaded. I tried a few modifications, but no one seemed to work. Am I missing something important? How or where should I set these values?

SLaks · Accepted Answer · 2013-12-19 22:20:35Z

3

        this.img.onload = this.imageLoaded()

You just called the function, and assigned its result to this.img.onload.

Instead, you need to assign the function itself, and you need to bind this:

        this.img.onload = this.imageLoaded.bind(this)

answered Dec 19, 2013 at 22:20

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3120846 Over a year ago

Thank you for quick reply, I can probably see the difference, but when I change the code, the body of imageLoaded function seems not to be executed at all.

Collectives™ on Stack Overflow

JavaScript Image object inside "class"

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related