• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

JavaScript Image properties not immediately available?

 
Sheriff
Posts: 11343
Mac Safari Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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?
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Mac Safari Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Mac Safari Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Mac Safari Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Mac Safari Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
Cob is sand, clay and sometimes straw. This tiny ad is made of cob:
a bit of art, as a gift, that will fit in a stocking
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic