Hey,
Just stumbled on a very interesting cross browser issue for Javascript. The problem was basically to find the actual dimensions of any image that is dynamically loaded in Javascript. Though the problem was seemingly simple, I got the code to work in Firefox() , but not on IE. The first approach was simple.
A hidden image tag was placed on the page, and Javascript loaded the image on the tag. It then waits hooks to the onload handler of that tag, a function that returns the width and height properties. Interestingly however, this works for the first time, but if the function is called again, IE does not call the onload method.
After a lot of googling, all I could find was that most used the approach of either used Image tag of new Image(), to create the image, place the URL in the source, and return the height/width right away. On disabling cache on Firefox, the approach failed- the images were not loaded, and hence, the dimensions were still zero. It seemed to work fine on IE however.
To wait till the image loads, i used the onload handler. On FF, the handler was called, but on IE, it failed. This is how the code looked like
var imgPreview = new Image();
imgPreview.src = document.getElementById("imageInputBox").value;
if (imgPreview.width > 0)
imgPreview.onload = function(){alert(imgPreview.width);};
I thought that the onload handler was not invoked due to closure, but I tried setting imgPreview = null, but even that did not work. There is some other reason that I am investigating, and would love to hear from you if you know it.
The only option to get it working was to handle the 2 cases differently, so here is what I got.
var imgPreview = new Image();
imgPreview.src = document.getElementById("giftImage").value;
if (imgPreview.width > 0)
{
alert(imgPreview.width);
}
else
{
imgPreview.onload = function(){alert(imgPreview.width);};
}
This approach works for me, and I am able to get the dimensions. You can check out the site, http://scraps.geekstimeout.com, to see how it works.
And for all the people who are following the development features of scraps.geekstimeout.com, you can now send gifts to friends without problems, both from FF and from IE.
