Hello all.
I'm trying to resolve a race condition I'm having with Netscape 4.7, Opera, and Mozilla (don't seem to have it with IE yet, but that doesn't mean it can't happen).
What I have to do is load an image, calculate it's height/width, and based on what I get back determine if I have to resize the image (and proportionally resize it as opposed to trying to slam it into a window and skew the image all around).
My problem is that the image.height and image.width only returns proper values once the image is preloaded.
So, here is the logic which I think I need to implement in a function for all of this to work:
1) preload the image based on URL
2) wait for the image to complete (have some trigger tell me that it's complete)
3) extract the original height/width of the image and return the value to the caller.
What I get however is problems. I was able to dig up one trigger image.onload which can fire once the image is loaded. I also have the image.complete flag which I can test to see if the image is finished loading into cache. However, it's my while loop which is causing me problems. It seems that if I stick myself in a while loop and check to see when the image is finished preloading, the thread of execution is never given back to the browser to finish loading up the image (likely in the background). So, as long as I'm in the while loop, the image does not seem to load. However, until the image is loaded, I have to remain in the loop. Catch-22.
The other possibility (using the image.onload trigger) can't work either, as I cannot seem to guarentee when it will go off (not serializable -- I cannot seem to direct the thread of execution back to the function which called the image to be loaded). Fubar.
Here is the code which demonstrates the problem. To set it up, simply have two images (image1.jpg and image2.jpg)in the same directory as this html file and it'll go:
I'm trying to resolve a race condition I'm having with Netscape 4.7, Opera, and Mozilla (don't seem to have it with IE yet, but that doesn't mean it can't happen).
What I have to do is load an image, calculate it's height/width, and based on what I get back determine if I have to resize the image (and proportionally resize it as opposed to trying to slam it into a window and skew the image all around).
My problem is that the image.height and image.width only returns proper values once the image is preloaded.
So, here is the logic which I think I need to implement in a function for all of this to work:
1) preload the image based on URL
2) wait for the image to complete (have some trigger tell me that it's complete)
3) extract the original height/width of the image and return the value to the caller.
What I get however is problems. I was able to dig up one trigger image.onload which can fire once the image is loaded. I also have the image.complete flag which I can test to see if the image is finished loading into cache. However, it's my while loop which is causing me problems. It seems that if I stick myself in a while loop and check to see when the image is finished preloading, the thread of execution is never given back to the browser to finish loading up the image (likely in the background). So, as long as I'm in the while loop, the image does not seem to load. However, until the image is loaded, I have to remain in the loop. Catch-22.
The other possibility (using the image.onload trigger) can't work either, as I cannot seem to guarentee when it will go off (not serializable -- I cannot seem to direct the thread of execution back to the function which called the image to be loaded). Fubar.
Here is the code which demonstrates the problem. To set it up, simply have two images (image1.jpg and image2.jpg)in the same directory as this html file and it'll go:
Code:
<html>
<head>
<title>javascript image test</title>
</head>
<body>
<script language="JavaScript1.2">
<!--
var TRUE = 1;
var FALSE = 0;
var image01 = new Image();
image01.src='image1.jpg';
function getImgHeight(path) {
if (document.images) {
var tmpImage = new Image();
tmpImage.src=path;
if (tmpImage.complete) {
return tmpImage.height;
} else {
while (!tmpImage.complete) {
continue;
};
return tmpImage.height;
}
}
}
function getImgWidth(path) {
if (document.images) {
var tmpImage = new Image();
tmpImage.src=path;
if (tmpImage.complete) {
return tmpImage.width;
} else {
while (!tmpImage.complete) {
continue;
};
return tmpImage.width;
}
}
}
document.write("<table border=1>");
document.write("<tr><td></td><td></td><td>IMAGE 1</td><td></td><td>IMAGE 2</td></tr>");
document.write("<tr><td>Height</td>");
document.write("<td></td><td>" + image01.height+ "</td>");
document.write("<td></td><td>" + getImgHeight('image2.jpg') + "</td></tr>");
document.write("<tr><td>Width</td>");
document.write("<td></td><td>" + image01.width + "</td>");
document.write("<td></td><td>" + getImgWidth('image2.jpg') + "</td></tr>");
document.write("</table>");
// -->
</script>
<p>
<table border=1>
<tr>
<td>Image1: </td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/image1.jpg></td>
<td>Image2: </td>
<td><img src=image2.jpg></td>
</tr>
</table>
</body>
</html>
Also notice that the image I preloaded (image01) seems to work (likely because the race condition doesn't seem to come up on my workstation). It's the image I preload in the functions which I can't ever get to work properly.
Any clue as to what I can do here? How can I get the image size reliably from a function call without having to wonder if that race condition is going to occure?
Thanks for any/all help,
Chris