Jump to content

  • Log In with Google      Sign In   
  • Create Account


Javascript: image.onload function inside "class"


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
4 replies to this topic

#1 mako1131   Members   -  Reputation: 115

Like
0Likes
Like

Posted 16 January 2014 - 11:57 AM

Greetings,

I am messing with JavaScript a little. I have a "class", that represents image. Inside that class, I try to assign a function to image.onload event. 

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

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

Basically I am trying to set widthCurr and heightCurr to actual size of the image after it is loaded. The function imageLoaded() seems not to be executed at all - there is no alert and when I draw the image, it is 100x100. What am I doing wrong?

 

Thanks for answers.

Mako



Sponsor:

#2 LJ_1102   Members   -  Reputation: 849

Like
0Likes
Like

Posted 16 January 2014 - 01:23 PM

Edit:

Be sure to use a polyfill if you want to be compatible to IE < 9

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind


Jan F. Scheurer - CEO @ Xe-Development

Sign Up for Xe-EngineBeta

 


#3 recursively   Members   -  Reputation: 291

Like
0Likes
Like

Posted 16 January 2014 - 01:54 PM

Works fine on JSFiddle: http://jsfiddle.net/E6bn9/2/


Edited by recursively, 16 January 2014 - 01:55 PM.


#4 mako1131   Members   -  Reputation: 115

Like
0Likes
Like

Posted 16 January 2014 - 01:57 PM

Well, I was doing it without bind (just 

  1. this.img.onload = this.imageLoaded;

but it was not working so some guy gave me advice to to use bind. I looked it up but I can't make it work properly :( .



#5 mako1131   Members   -  Reputation: 115

Like
0Likes
Like

Posted 16 January 2014 - 02:11 PM

Works fine on JSFiddle: http://jsfiddle.net/E6bn9/2/

Lol...apparently problem was somewhere else. Thanks for pointing out, it is working properly now :)






Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS