• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

JavaScript Image properties not immediately available?

 
marc weber
Sheriff
Posts: 11343
Java Mac Safari
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm creating 2 new JavaScript Image objects. One is global, and the other is local.

I can access properties (like height or width) of the global Image object. But I cannot immediately access these properties of the local Image object. This is demonstrated in the following code, in which the width of the global image is correctly reported, but the width of the local image is 0.

Note that this happens ONLY the first time. If you click the button a second time, or simply reload the page, then the local image properties are available. The issue occurs in Firefox, Chrome, and Safari. (Opera, however, is able to read the image properties the first time.)

If I use setTimeout to allow the function to "think," then the local image properties are available. For example, if I modify go() as follows...

The timeout can be as low as 0 in Safari and Firefox, but it's essential. If that line is replaced with a direct call to think(), then it won't work. In Chrome, the timeout needs to be at least 2 (perhaps because 0 or 1 are just optimized to be immediate?).

Does anyone know what exactly is happening here?

Or to the point, what is the best approach for accessing properties of locally created Image objects?
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64715
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Rather than creating a race condition with a time-out, have you tried waiting until the onload handler fires to check the image properties?
 
marc weber
Sheriff
Posts: 11343
Java Mac Safari
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks, Bear! I didn't know that the Image object had an onload event handler.

(I've just started getting "serious" about JavaScript in the last month or so... )
 
marc weber
Sheriff
Posts: 11343
Java Mac Safari
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Okay, what am I missing? If I use onload to trigger the alert, then shouldn't the image have finished loading and have its properties accessible by then?
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What is this line doing?


It says return whatever this function gives me and store it in this onload event.

It does not say store this method into this onload event.

Eric
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64715
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Common mistake. Rather:Which references the function, rather than calling it.

Or even better:if the function doesn't need to be named for reference elsewhere.
 
marc weber
Sheriff
Posts: 11343
Java Mac Safari
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric Pascarello wrote:...It says return whatever this function gives me and store it in this onload event.

It does not say store this method into this onload event...

That makes sense. So I want to refer to the function as an object, without the parentheses...

If my understanding is correct, I think I'm having an "ah-ha" moment about JavaScript functions being objects, and passing them around by name.
 
marc weber
Sheriff
Posts: 11343
Java Mac Safari
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:...Or even better:if the function doesn't need to be named for reference elsewhere.

Excellent! I might get a grip on this JavaScript stuff out after all.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64715
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
marc weber wrote:If my understanding is correct, I think I'm having an "ah-ha" moment about JavaScript functions being objects, and passing them around by name.

Bingo! Using JavaScript as a functional language is something we Java devos sometimes have to put some effort into grokking.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic