Preserved Topic: Can JS find the width and height of an image before it has been rendered on screen? $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8959" title="Pages that link to Preserved Topic: Can JS find the width and height of an image before it has been rendered on screen?" rel="nofollow" >Preserved Topic: Can JS find the width and height of an image before it has been rendered on screen?\$

Author	Thread
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 11-26-2003 20:54 Ok, I would like to be able to use javascript to swap large images onclick of a corresponding thumbnail image. The trouble is that as far as I'm aware whenever you change the src of an image it unfortunately still retains the original images dimensions which means all images have to be the same size. So I was wondering if javascript has a way to read the actual image size from the image file as opposed to just what size it has rendered at on screen. If there isn't a way to do this, is it possible to use the DOM to remove the image node and insert a new image node to beat this problem? If so how is that done? I had found a great way to switch images, which was to simply use styles and change the obj.style.background value to the new src - this works great in IE but in other browsers it fails unless the images are preloaded which I don't want to do. Please help guys, Jon visit my CryoKinesis Online Gallery
Yossi Admon Bipolar (III) Inmate From: Israel Insane since: Nov 2001	posted 12-01-2003 20:58 Hi, I hope the following code will help (works in IE and Mozilla): <HTML> <TITLE>Image Replacer</TITLE> <SCRIPT LANGUAGE=javascript> <!-- var _activeImage = new Object(); var _pos = 0; var _imgArr = new Array(); _imgArr[_imgArr.length] = "http://www.ozoneasylum.com/images/ASYLUM44b.jpg"; _imgArr[_imgArr.length] = "http://www.ozoneasylum.com/open.gif"; _imgArr[_imgArr.length] = "http://www.ozoneasylum.com/posttopic.gif"; _imgArr[_imgArr.length] = "http://www.ozoneasylum.com/hotclosedb.gif"; _imgArr[_imgArr.length] = "http://grm.i.walla.co.il/w/hp/t-r.gif"; _imgArr[_imgArr.length] = "http://sc.msn.com/c/portal/logo/full/msft.gif"; _imgArr[_imgArr.length] = "http://sc.msn.com/6_/BSF`4KXEE1{Z1VQ5T!-IV.jpg"; _imgArr[_imgArr.length] = "./dummy.gif"; function LoadError(){ var src = _activeImage.obj.src; _activeImage.obj = null; alert("error while loading image: " + src); } function ImageLoaded(){ if(_activeImage.obj){ var oImage = document.getElementById(_activeImage.imgId); oImage.src = _activeImage.obj.src; oImage.style.width = _activeImage.obj.width; oImage.style.height = _activeImage.obj.height; } } function ReplaceImage(imgSrc, imgId){ _activeImage.obj = new Image(); _activeImage.obj.onload = ImageLoaded; _activeImage.obj.onerror = LoadError; _activeImage.imgId = imgId; _activeImage.obj.src = imgSrc; } function DoReplace(imgId){ ((_pos+1) >= _imgArr.length)?_pos = 0:_pos++; ReplaceImage(_imgArr[_pos], imgId) } //--> </SCRIPT> <BODY> <CENTER> <BR> <BR> <IMG id="img1" border="1px"> <INPUT type="button" value="Replace" onClick="DoReplace('img1')"> </CENTER> </BODY> </HTML>
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 12-02-2003 00:25 Hi, That looks interesting, can you just explain it to me a bit tho? What I think is basically happening is you are loading the images into a new object and then using the dimensions of that object to change the dimensions of the image element which is also having it's src changed to the that of the image in the object. To be honest _(underscore) in code tends to confuse me, even tho it is just part of the variable names. I few hints on what is happening and where would be great, that way I can fit it into my existing code more easily. Thanks tho, it looks great. visit my CryoKinesis Online Gallery
Yossi Admon Bipolar (III) Inmate From: Israel Insane since: Nov 2001	posted 12-02-2003 07:34 Hi, You understoos the code well. Basically the replacement of the image is taking place only ofter the backgrownd load of the image done. the use of _(underscore) in function names and in variables is to "warn" the users not to call/modify this functions/parameter values (for internal use only) it is convention i'm using to indicate private/public functions/variables.
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 12-02-2003 18:35 Thanks mate, I reckon this is just what I needed, I'm amazed I never thought to use a similar principle before. Thanks again, Jon visit my CryoKinesis Online Gallery
bitdamaged Maniac (V) Mad Scientist From: 100101010011 <-- right about here Insane since: Mar 2000	posted 12-02-2003 18:51 You can also just not put the height and width params in the img tag you are swapping as well. .:[ Never resist a perfect moment ]:.
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 12-02-2003 22:42 Hi Bitty, I don't think that works since browsers (at least ie) auto generates height a width parameters if they haven't been set try this cool IE only bookmarklet and see: code: javascript :(function(){ function htmlEscape(s){s=s.replace(/&/g,'&');s=s.replace(/>/g,'>');s=s.replace(/</g,'<');return s;} x=window.open(); x.document.write('<pre>' + htmlEscape('<html>\n' + document.documentElement.innerHTML + '\n</html>')); x.document.close(); })(); visit my CryoKinesis Online Gallery [This message has been edited by smonkey (edited 12-02-2003).]
bitdamaged Maniac (V) Mad Scientist From: 100101010011 <-- right about here Insane since: Mar 2000	posted 12-03-2003 00:46 No it generates height and width attributes from the loaded image it doesn't force parameters. This works fine http://www.bitdamaged.com/testpages/imagesize/test.html just click on the image. If for some reason you really feel the need to put the image height and width into the image then you can just do something like this http://www.bitdamaged.com/testpages/imagesize/test2.html .:[ Never resist a perfect moment ]:. [This message has been edited by bitdamaged (edited 12-03-2003).]
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 12-04-2003 13:07 ok the first one doesn't seem to work in moz (maybe that's just me) can I just clarify with you that the images aren't preloading? well I see a few glitches, mostly that if I click before a new image has been cached the image dimensions (in moz) seem to be 0 or 1 px, only on a second attempt does the image show as the right size. IE seems to work fine tho. So basically if the first script might be ok in moz in terms of the images not appearing at 0 or 1px square, but obviouslt it's no good if it doesn't work at all like it seems to be at the moment. Sorry to be picky about it Bitty, it's a much simpler and easier way to do things and that is always the best way to go, but it seems to have a few bugs that I'm not so keen on - maybe it's my dialup, maybe it's my browser, but if I have trouble with it working then so will others so I need a glitch free working solution which is as simple as possible. I will play around with both techniques to see if I can get something small and efficient working, if you guys have any more ideas then feel free to post them, otherwise I thank you lots for all your contributions so far, they have been very helpful. visit my CryoKinesis Online Gallery
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 12-04-2003 13:17 ok bitty, I found the problem stopping the first one working in moz: myImg.src = (flag) ? img1.src : img2.src; had to be: document.images.myImg.src = (flag) ? img1.src : img2.src; I think maybe I will be using this solution afterall as it works and does it well too, yossi's was a cooler script tho, some good stuff happening there.

Preserved Topic: Can JS find the width and height of an image before it has been rendered on screen?\$

Author

Thread

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 11-26-2003 20:54

Ok,

I would like to be able to use javascript to swap large images onclick of a corresponding thumbnail image.

The trouble is that as far as I'm aware whenever you change the src of an image it unfortunately still retains the original images dimensions which means all images have to be the same size.

So I was wondering if javascript has a way to read the actual image size from the image file as opposed to just what size it has rendered at on screen.

If there isn't a way to do this, is it possible to use the DOM to remove the image node and insert a new image node to beat this problem? If so how is that done?

I had found a great way to switch images, which was to simply use styles and change the obj.style.background value to the new src - this works great in IE but in other browsers it fails unless the images are preloaded which I don't want to do.

Please help guys,

Jon

visit my CryoKinesis Online Gallery

Yossi Admon
Bipolar (III) Inmate

From: Israel
Insane since: Nov 2001

posted 12-01-2003 20:58

Hi,
I hope the following code will help (works in IE and Mozilla):

<HTML>
<TITLE>Image Replacer</TITLE>
<SCRIPT LANGUAGE=javascript>

</SCRIPT>
<BODY>
<CENTER>
<BR>
<BR>
<IMG id="img1" border="1px">
<INPUT type="button" value="Replace" onClick="DoReplace('img1')">
</CENTER>
</BODY>
</HTML>

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 12-02-2003 00:25

Hi,

That looks interesting, can you just explain it to me a bit tho? What I think is basically happening is you are loading the images into a new object and then using the dimensions of that object to change the dimensions of the image element which is also having it's src changed to the that of the image in the object.

To be honest _(underscore) in code tends to confuse me, even tho it is just part of the variable names.

I few hints on what is happening and where would be great, that way I can fit it into my existing code more easily.

Thanks tho, it looks great.

visit my CryoKinesis Online Gallery

Yossi Admon
Bipolar (III) Inmate

From: Israel
Insane since: Nov 2001

posted 12-02-2003 07:34

Hi,
You understoos the code well.
Basically the replacement of the image is taking place only ofter the backgrownd load of the image done.
the use of _(underscore) in function names and in variables is to "warn" the users not to call/modify this functions/parameter values (for internal use only) it is convention i'm using to indicate private/public functions/variables.

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 12-02-2003 18:35

Thanks mate,

I reckon this is just what I needed, I'm amazed I never thought to use a similar principle before.

Thanks again,

Jon

visit my CryoKinesis Online Gallery

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted 12-02-2003 18:51

You can also just not put the height and width params in the img tag you are swapping as well.

.:[ Never resist a perfect moment ]:.

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 12-02-2003 22:42

Hi Bitty,

I don't think that works since browsers (at least ie) auto generates height a width parameters if they haven't been set

try this cool IE only bookmarklet and see:

code:

javascript  :(function(){ function htmlEscape(s){s=s.replace(/&/g,'&');s=s.replace(/>/g,'>');s=s.replace(/</g,'<');return s;} x=window.open(); x.document.write('<pre>' + htmlEscape('<html>\n' + document.documentElement.innerHTML + '\n</html>')); x.document.close(); })();

visit my CryoKinesis Online Gallery

[This message has been edited by smonkey (edited 12-02-2003).]

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted 12-03-2003 00:46

No it generates height and width attributes from the loaded image it doesn't force parameters.

This works fine
http://www.bitdamaged.com/testpages/imagesize/test.html

just click on the image.

If for some reason you really feel the need to put the image height and width into the image then you can just do something like this

http://www.bitdamaged.com/testpages/imagesize/test2.html

.:[ Never resist a perfect moment ]:.

[This message has been edited by bitdamaged (edited 12-03-2003).]

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 12-04-2003 13:07

ok the first one doesn't seem to work in moz (maybe that's just me)

can I just clarify with you that the images aren't preloading?

well I see a few glitches, mostly that if I click before a new image has been cached the image dimensions (in moz) seem to be 0 or 1 px, only on a second attempt does the image show as the right size. IE seems to work fine tho.

So basically if the first script might be ok in moz in terms of the images not appearing at 0 or 1px square, but obviouslt it's no good if it doesn't work at all like it seems to be at the moment.

Sorry to be picky about it Bitty, it's a much simpler and easier way to do things and that is always the best way to go, but it seems to have a few bugs that I'm not so keen on - maybe it's my dialup, maybe it's my browser, but if I have trouble with it working then so will others so I need a glitch free working solution which is as simple as possible. I will play around with both techniques to see if I can get something small and efficient working, if you guys have any more ideas then feel free to post them, otherwise I thank you lots for all your contributions so far, they have been very helpful.

visit my CryoKinesis Online Gallery

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 12-04-2003 13:17

ok bitty, I found the problem stopping the first one working in moz:

myImg.src = (flag) ? img1.src : img2.src;

had to be:

document.images.myImg.src = (flag) ? img1.src : img2.src;

I think maybe I will be using this solution afterall as it works and does it well too, yossi's was a cooler script tho, some good stuff happening there.