Get image width in FireFox at onload

gyzhor

08-25-2010, 07:52 PM

Hi CF,

I'm a graphic/designer and occasional Actionscript developer making what's turning out to be a rather clumsy transition into Javascript. Be gentle. :D

I'm trying to create a script that will load an external image and test whether it's in my document's "tall" or "wide" formats before placing it in the page.

This is easy in IE just using imageObject.width, but Firefox seems to always return a value of 0, no matter what I do (this includes using imageObject.naturalWidth).

Refreshing the page suddenly causes the wide mode to activate, but any time before the image is actually placed in the document, FF just won't read the width.

I've tried maybe a dozen different scripts, but here's my most recent:

function testImage(){
if (defaultImage.naturalWidth > 320){
wideMode = true;
}
placeImage();
}

function loadFirstImage(){
defaultImage.src = "images/myGIF.gif";
defaultImage.onLoad = testImage();
}

Any ideas on how to accurately get an image object's width after loading, but before placing it on the page?

Any help is much appreciated.

Thanks,
~gyz

Arty Effem

08-25-2010, 09:08 PM

I have to assume that defaultImage is a correct reference to an Image object that you've created elsewhere. It must not be the ID of an <img> tag.

Try this edit and note all the differences:
function testImage()
{
wideMode = (defaultImage.width > 320);

placeImage();
}

function loadFirstImage()
{
defaultImage.onload = testImage; /*Install before specifying src*/

defaultImage.src = "images/myGIF.gif";
}

Old Pedant

08-25-2010, 09:46 PM

He said "before placing it [the image] on the page", so I'm guessing that he has done

var defaultImage = new Image();

But that still should work on most browsers.

Old Pedant

08-25-2010, 09:48 PM

A slightly more elegant solution that doesn't depend on the variable defaultImage being accessible to the testImage function:

function testImage()
{
wideMode = this.width > 320;
placeImage();
}

function loadFirstImage()
{
defaultImage.onload = testImage; /*Install before specifying src*/
defaultImage.src = "images/myGIF.gif";
}

gyzhor

08-25-2010, 09:54 PM

Thanks Arty, that sure seems to work.

My problem now is that it appears to cause some sort of conflict in the page's existing script (my script will eventually be an external .js embedded in a page generated by a third-party application).

But, well, that's a different problem that's probably a little complicated to go into here (unless you can think of why placing my .js source at the top of the head might prevent any other content from loading).

=========
Actually, I just ran a test with both wide and tall modes wherein the only other content on the page is
<body>
<input type="button" value="Back" onclick="location.href='testWide.html'" />
</body>

The button doesn't even get loaded in FF, and in IE, navigating between the two pages linked by the button (identical, ecept one triggers tall mode and the other triggers wide) causes the subsequent page not to load at all; the browser just hangs.

The problem could be squirreled away somewhere in the rest of my code, but didn't cause a problem until this latest fix. Any ideas?

Thanks again for the help!
~gyz