Topic awaiting preservation: obtaining image's full dimensions before it has fully loaded? (Page 1 of 1)

Hi again,

Ok this is just a quickie, when you have an image loading via a conventional img tag (with no height or width specified) is it possible to use javascript to obtain the height and width of the image before it finishes loading? is image dimension data transmitted first before the image starts rendering, and if so is it possible to obtain those dimensions before the image has fully loaded?

Thanks guys

It's quite a while ago since I struggled with this subject, but I believe the dimensions are indeed known before the image is fully loaded(not 100% sure, though). Anyways, in order to get the image width and height, you could load the image inside of a DIV and then ask for the offsetWidth and offsetHeight of that DIV. (or maybe that isn't even necessary, and you can get the offsetWidth and offsetHeight of the IMG-tag).

So... What are you up to then?

Thanks Nevel,

Well as many people who have been reading this forum for sometime will know I am constantly looking for beter ways to control manage and present my online 'art gallery'.

This particular post comes down to something very simple, basically I have a series of thumbnails for each artist and when clicked these open the larger images in a specified part of the design. I would like to be able to only actually show the thumbnail image when the full image has been loaded and is ready to view. The only way to switch images of varying sizes in a design without screwing up is to use the css background property to display them, but in order for that work in earlier moz and all opera browsers is to have the images preloaded. The simple solution I had to this is to make one image which has the 75px x 75px thumb in the top left and directly beneath is the full image, that way the thumb would only appear when the image has been loaded and all I need do is contain the separte images in specifically sized divs with the overflow set to hidden - flawless plan except that It would be nice to size of the images to enable accurate centering/positioning of divs in the flow of the design. It's all somewhat confusing so I'm just looking for alternative ways to achieve the effect whilst keeping everything is snall and simple as possible.

What would be great would to be able to make a 'two frame jpeg' but it's not possible. I could use gif and use javascript to switch frames but this would increase the quality:filesize ratio since all the gallery imagesare best compressed with jpeg.

I don't suppose there is anyway to embed a thumbnail image in a jpeg and have it accesible by javascript? I know that photoshop 7 will always embed thumbnail images in jpegs unless you use 'save for web' or change this setting in the preferences menu. Apparently this is within the jpeg specs, but programs like quark fail to understand these jpegs at all (but not relevant in this case). What would be interesting to know would be if there is a way to create jpegs with specific size (75 x 75) thumbnail images embedded, and whether javascript could access and display these images via html - I doubt it, but sometimes clever things happen.

Thanks again,

Jon

visit my CryoKinesis Online Gallery

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.