javascript image object

[section31]

Ok, this is a long shot but I hope someone can help me. I'm receiving a javascript error on IE, but not on firefox and the line number returned on ie is just the declaration for javascript so I don't know whats wrong. The thing that makes this even more confusing is that the error only happens when the image is stored in the cache. When you ctrl+refresh bypassing the cache, the image and function loads fine, but when you load the image from the cache, the function goofs up and ie returns an error "object required"

Can someone take a look at this and tell me if you see something wrong.
see script in action here

<script type="text/javascript">
var x = new Image;
x.src = 'foobar.jpg';

loading = setTimeout("scaleImg()", 200);
var saveWidth = 0;

function scaleImg() 
{
	if (x.complete) {
		what = document.getElementById('thepic');
		if (winW = screen.width) {
			if (what.width>(winW-100) || saveWidth>(winW-100)) {
				if (what.width == (winW-100)) {
					what.width = saveWidth;
				}
				else {
					saveWidth = what.width;
					what.width = (winW-100);
				}
			}
		}
		clearTimeout(loading);
	}
	else {
		loading = setTimeout("scaleImg()", 200);
	}
}		
</script>

What I'm doing here is using the image object to determine when the image is complete, and when its complete I have it resize to a suitable width for the clients screen size. It works fine on both ie and mozilla when the image is not in the cache which is ok, but my main riority is getting rid of that error that I get on ie when I refresh the document.

[Willy Duitt]

http://www.webdeveloper.com/forum/sh...ad.php?t=72821
http://forums.devshed.com/t272253/s7...d813c2214.html

[section31]

Ok, i was able to figure out the problem, in case anyone wants to know.

The reason it would do it sometimes and not all the time was because I obviously didn't wait until the entire page loads before I start manipulating these objects. Here is my revision and it now works perfectly. I made several revisions but the main thing I had to use was the global event handler window.onload to load the function only after the entire page has been loading.

<script type="text/javascript">
	var x = new Image;
	x.src = 'foobar.jpg';

	var saveWidth = 0;
	var loading;
	function go() {
		loading = setInterval("scaleImg()", 200);
	}

	function scaleImg() 
	{
		if (x.complete) {
			what = document.getElementById('thepic');
			winW = screen.width;
			if (what.width>(winW-100) || saveWidth>(winW-100)) {
				if (what.width == (winW-100)) {
					what.width = saveWidth;
				}
				else {
					saveWidth = what.width;
					what.width = (winW-100);
				}
			}
			clearInterval(loading);
		}
	}		
</script>

What I plan on doing is looking for a javascript book, because I don't have a full grasp of it. For instance, I have no idea how the variable scopes work in js. I still don't understand why js is able to access vars from inside the function even though they aren't global.

[yandina]

I tried dozens of ways to find out when the image load was finished but couldn't get it to work in Netscape.

What I ended up doing was to load a "Not ready yet" image into the document image so they saw that if it hadn't downloaded.