How to kickstart a value

[Dal]

Ive got a really strange problem with the way that a value is working. I probably just missed something but its strange how it works at the moment.

I use a thumb nail system to pull in a picture from a different directory. Because these thumbnails are going to be extensive and each image has different sizes I just use javascript to read the source of the image and report the image width and height through one of my functions. Simple, well maybe not after hours of testing and trying to get this to work I realised that it takes 2 attempts to report the width and height;

        var ImportImg = new Image();
	ImportImg.src = document.getElementById('IMG'+ObjID).src;
        document.getElementById(ObjID).style.width = ImportImg.width+"px";
	document.getElementById(ObjID).style.height = ImportImg.height+"px";

all images are given the value of 'IMG'+ObjID so for instance ObjID= "Test" then the image would ID be "IMGTest" which sits inside a div with an ID of "Test" and is assigned the width and height of the image within.

ImportImg is generated from a new Image(); object and then ImportImg is assigned the image source which returns the correct URL.

The next two lines are used to apply the width and height to the div dom properties which should be the width and height of this imported image except thay are set as 0 (Zero);

After I perform the same task a second time the values are presented as the true width and height (example 200 x 200) but only on the second pass.

Calling this function twice (fuzzy logic) makes no difference and its as if the image hasnt been loaded fully for the dimensions to be returned properly.

I use this script below with the modification of alerting the values which report 0 (zero) but then the assignments to the div layer work (200 x 200)

        var ImportImg = new Image();
	ImportImg.src = document.getElementById('IMG'+ObjID).src;
        alert(ImportImg.width);
        document.getElementById(ObjID).style.width = ImportImg.width+"px";
	document.getElementById(ObjID).style.height = ImportImg.height+"px";

I need to kickstart the width and height to return properly but Im unsure as to how to accomplish this. Ive tried putting in a for loop to delay with no luck and outputting the value to a hidden text feild is also not enough. It seems that alert is the only thing to trigger the properties to work properly (regardless of how quickly I click the ok button on the alert box)

Hope this made sense.

[clueful]

I just use javascript to read the source of the image and report the image width and height through one of my functions. Simple, well maybe not after hours of testing and trying to get this to work I realised that it takes 2 attempts to report the width and height;

This is a common mistake; you must be certain that the image has loaded before reading its dimensions, so use the onload event to do it and don't apply the src until you have installed the onload handler.

var ImportImg = new Image();

ImportImg.onload=function()
{
 document.getElementById(ObjID).style.width = ImportImg.width+"px";
 document.getElementById(ObjID).style.height = ImportImg.height+"px";
}

ImportImg.src = document.getElementById('IMG'+ObjID).src;

This is just an example of the way it's done, in addition you'll need a closure to preserve the correct id for each image.

[Dal]

This is a common mistake; you must be certain that the image has loaded before reading its dimensions, so use the onload event to do it and don't apply the src until you have installed the onload handler.

var ImportImg = new Image();

ImportImg.onload=function()
{
 document.getElementById(ObjID).style.width = ImportImg.width+"px";
 document.getElementById(ObjID).style.height = ImportImg.height+"px";
}

ImportImg.src = document.getElementById('IMG'+ObjID).src;

This is just an example of the way it's done, in addition you'll need a closure to preserve the correct id for each image.

Thanks for your reply clueful!

I did try to work in the onload handler but couldnt get it to work. The above seems like a different way of handling it but Im curious about the last statement;

"in addition you'll need a closure to preserve the correct id for each image."


I only require the image() object to read in the values of the height and width after this has been done I do not refere to the ImportImg object again unless I pull in a new image. If I need to address the image for modification this is handled through document.getElementById('IMG'+ObjID')
Do I still need to close? if so how do I close?

I just want to clarify that last point before I check it.

Thanks
Dal