Reading width and height of dynamically loaded image

[Berend]

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);

...
}

^^^

 

[Martin Honnen]

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.

 

[Berend]

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)

 

[Thomas 'PointedEars' Lahn]

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

 

[Thomas 'PointedEars' Lahn]

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

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

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]>, Thu,

Randy Webb wrote:

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.

 

[Thomas 'PointedEars' Lahn]

In comp.lang.javascript message <[email protected]>, Thu,


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

 

[Thomas 'PointedEars' Lahn]

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

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.

Now that you mention it, that has become mutual. I know much better ways to
waste my time than dealing with you, and I really wonder now why I actually
considered to remove you obnoxious troll from my killfile in the first
place. Welcome back home, then.

*PLONK*