*
The moose likes HTML, CSS and JavaScript and the fly likes JavaScript Image properties not immediately available? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "JavaScript Image properties not immediately available?" Watch "JavaScript Image properties not immediately available?" New topic
Author

JavaScript Image properties not immediately available?

marc weber
Sheriff

Joined: Aug 31, 2004
Posts: 11343

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?


"We're kind of on the level of crossword puzzle writers... And no one ever goes to them and gives them an award." ~Joe Strummer
sscce.org
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60785
    
  65

Rather than creating a race condition with a time-out, have you tried waiting until the onload handler fires to check the image properties?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
marc weber
Sheriff

Joined: Aug 31, 2004
Posts: 11343

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

Joined: Aug 31, 2004
Posts: 11343

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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Jan 10, 2002
Posts: 60785
    
  65

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

Joined: Aug 31, 2004
Posts: 11343

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

Joined: Aug 31, 2004
Posts: 11343

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

Joined: Jan 10, 2002
Posts: 60785
    
  65

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.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: JavaScript Image properties not immediately available?
 
Similar Threads
502 Bad Gateway error during process
On propertychange issues with text value
internet Explorer cannot open this site error with pageLoad progressbar
Alert and setTimeout methods behaving differently in IE and Safari
Page section does not update after call of a4j:support in IE 9