Reading width and height of dynamically loaded image

My question: can width and height be derived from a preloaded image?

I'm trying to load a dynamically generated image as marker in my Google
Maps mashup. However, a GIcon (Google Icon) object requires width and
height to be set before loading. I therefore created a hidden <img> in
my source which I point to the right location using javascript and
retrieve width and height once loaded.
This doesn't seem to work, since the marker first scales to an absurd
width (250px+) and only resizes to the correct measurements after
reloading all markers.

Please review my code below. What am I doing wrong? Any hints?
TIA!



The code that I thought would do the trick:
================================================== ==
First, pointing <img> source to the right location:


HTML: <img src="" id="preloader" style="visibility: hidden;" />

javascript:
document.getElementById("preloader").src = "./dynMarker.aspx?...";
document.getElementById("preloader").onload = createMarker();

^^^

Once the preloading is done, I try to retrieve the width and height:
(generated imgsize is at least 50px wide and always 35px high)


function createMarker() {
var width = document.getElementById("preloader").width;
var height = document.getElementById("preloader").height;

var icon = new GIcon();
icon.image = document.getElementById("preloader").src;
icon.shadow = "grfx/marker_shadow.png";
icon.shadowSize = new GSize((100/50)*width, 35);
icon.iconSize = new GSize(width, height);
icon.iconAnchor = new GPoint(parseInt(width/2), height);

...
}

^^^

Berend wrote:

document.getElementById("preloader").src = "./dynMarker.aspx?...";
document.getElementById("preloader").onload = createMarker();

Set onload first, then set src, and you need to set onload to a function
that calls createMarker e.g.

document.getElementById("preloader").onload = function () {
createMarker();
};
document.getElementById("preloader").src = "./dynMarker.aspx?...";

Note that you can simply create an Image object in memory with
var img = new Image();
img.onload = function () { createMarker(); };
img.src = './dynMarker.aspx?...';
there is no need to put an img element into the document and hide it to
preload images.


--

Martin Honnen
http://JavaScript.FAQTs.com/

Martin Honnen wrote:

Berend wrote:

document.getElementById("preloader").src = "./dynMarker.aspx?...";
document.getElementById("preloader").onload = createMarker();

Set onload first, then set src, and you need to set onload to a function
that calls createMarker e.g.

document.getElementById("preloader").onload = function () {
createMarker();
};
document.getElementById("preloader").src = "./dynMarker.aspx?...";

Note that you can simply create an Image object in memory with
var img = new Image();
img.onload = function () { createMarker(); };
img.src = './dynMarker.aspx?...';
there is no need to put an img element into the document and hide it to
preload images.

Thanks for your quick reply!
I clearly didn't understand the onload property , adding function() {
[function to call] } and placing it before settings src did the trick!
(This also explains why it would always trigger the image's error)

Martin Honnen wrote:

Note that you can simply create an Image object in memory with
var img = new Image();
img.onload = function () { createMarker(); };
img.src = './dynMarker.aspx?...';
there is no need to put an img element into the document and hide it to
preload images.

And in the worst case, with "preloading" the download of the image data will
be done twice. Great.


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7 (AT) news (DOT) demon.co.uk>

Thomas 'PointedEars' Lahn said the following on 12/12/2007 6:11 PM:

Martin Honnen wrote:
Note that you can simply create an Image object in memory with
var img = new Image();
img.onload = function () { createMarker(); };
img.src = './dynMarker.aspx?...';
there is no need to put an img element into the document and hide it to
preload images.

And in the worst case, with "preloading" the download of the image data will
be done twice. Great.

Almost as nice as having to snip part of an improperly delimited
signature. But, are you sure it will download the "image data" twice?

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Randy Webb wrote:

Thomas 'PointedEars' Lahn said the following on 12/12/2007 6:11 PM:
Martin Honnen wrote:
Note that you can simply create an Image object in memory with
var img = new Image();
img.onload = function () { createMarker(); };
img.src = './dynMarker.aspx?...';
there is no need to put an img element into the document and hide it to
preload images.
And in the worst case, with "preloading" the download of the image data will
be done twice. Great.

Almost as nice as having to snip part of an improperly delimited
signature.

My signature is properly delimited, and its content is not subject to any
standards. Deal with it.

But, are you sure it will download the "image data" twice?

I was talking about the _worst case_, was I not?


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

Thomas 'PointedEars' Lahn said the following on 12/13/2007 2:23 PM:

Randy Webb wrote:
Thomas 'PointedEars' Lahn said the following on 12/12/2007 6:11 PM:
Martin Honnen wrote:
Note that you can simply create an Image object in memory with
var img = new Image();
img.onload = function () { createMarker(); };
img.src = './dynMarker.aspx?...';
there is no need to put an img element into the document and hide it to
preload images.
And in the worst case, with "preloading" the download of the image data will
be done twice. Great.
Almost as nice as having to snip part of an improperly delimited
signature.

My signature is properly delimited, and its content is not subject to any
standards. Deal with it.

Only you could come up with something that asinine. But, I don't expect
much differently from you. BTW, your signature is *not* properly delimited.

But, are you sure it will download the "image data" twice?

I was talking about the _worst case_, was I not?

Sometimes, people are not even sure *you* know what you are talking about.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

In comp.lang.javascript message <4761869C.3010601 (AT) PointedEars (DOT) de>, Thu,
13 Dec 2007 20:23:08, Thomas 'PointedEars' Lahn <PointedEars (AT) web (DOT) de>
posted:

Randy Webb wrote:

Almost as nice as having to snip part of an improperly delimited
signature.

My signature is properly delimited, and its content is not subject to any
standards. Deal with it.

Your signature does not conform with the elementary but well-considered
FYI28/RFC1855. Accordingly, whatever later standards may contain, your
articles do not have a fit-for-purpose signature and you are misusing
the delimiter.

Grow up. Adolescent behaviour is, at most, tolerable in an adolescent.

--
(c) John Stockton, Surrey, UK. replyYYWW merlyn demon co uk Turnpike 6.05.
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demon.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes precede replies. Snip well. Write clearly. Mail no News.

Dr J R Stockton wrote:

In comp.lang.javascript message <4761869C.3010601 (AT) PointedEars (DOT) de>, Thu,
13 Dec 2007 20:23:08, Thomas 'PointedEars' Lahn <PointedEars (AT) web (DOT) de
posted:
Randy Webb wrote:

Almost as nice as having to snip part of an improperly delimited
signature.
My signature is properly delimited, and its content is not subject to any
standards. Deal with it.

Your signature does not conform with the elementary but well-considered
FYI28/RFC1855.

First, that is _not_ a standard. Second, yes, it does conform. It consists
of a signature delimiter "-- " that is followed by at most four lines of
content. Anything else is beyond that *recommendation*.

Incidentally, that recommendation includes "A good rule of thumb: Be
conservative in what you send and liberal in what you receive."

You two should give the second part more thought. Maybe you even start
wondering why nobody else in whole wide Usenet has anything to say against
my signature, neither in public nor in private, and why you two are the
people who contribute the least amount of *substantial* responses, but the
most amount of noise to this newsgroup. But I would not expect you to do that.


EOD

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

Thomas 'PointedEars' Lahn said the following on 12/14/2007 3:58 PM:

Dr J R Stockton wrote:
In comp.lang.javascript message <4761869C.3010601 (AT) PointedEars (DOT) de>, Thu,
13 Dec 2007 20:23:08, Thomas 'PointedEars' Lahn <PointedEars (AT) web (DOT) de
posted:
Randy Webb wrote:
Almost as nice as having to snip part of an improperly delimited
signature.
My signature is properly delimited, and its content is not subject to any
standards. Deal with it.
Your signature does not conform with the elementary but well-considered
FYI28/RFC1855.

First, that is _not_ a standard. Second, yes, it does conform. It consists
of a signature delimiter "-- " that is followed by at most four lines of
content. Anything else is beyond that *recommendation*.

Only you, my friend, only you could come up with that crap. Especially
considering how anal you are at times about how people post.

Incidentally, that recommendation includes "A good rule of thumb: Be
conservative in what you send and liberal in what you receive."

I will remind you of that the next time you are anally pedantic about
what someone calls something. Or, the next time you whine and moan about
a munged email address. Practice what you preach.

You two should give the second part more thought. Maybe you even start
wondering why nobody else in whole wide Usenet has anything to say against
my signature, neither in public nor in private, and why you two are the
people who contribute the least amount of *substantial* responses, but the
most amount of noise to this newsgroup. But I would not expect you to do that.

You have obviously mistaken me for someone who gives a flying rat's ass
what you think of me. Newsflash, I don't. In fact, you could take my
concern for what you think of me, shove it up a gnat's ass, and you
wouldn't constipate the poor critter.

Reading you complain about noise in this group falls into a "That's
nice" category. Need a URL to explain to you what "That's nice" means?
Oh, what the hell, here it is anyway:

<URL: http://members.aol.com/_ht_a/hikksnotathome/thatsNice.html>

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/