Javascript onload for preloading images problem

[Zash]

Hello, I've been using this site to teach myself various things with Javascript, HTML5 and PHP, and I have run into a snag.I am trying to do a slideshow type thing (with some extra functionality, but I am not there yet) without using flash, so I am trying to do it with Javascript. The problem I am having is with preloading the next slide image.I am currently just using Firefox right now, and am just wanting it to work for FF before I start trying to work with IE.The program pulls an XML file that has the list of images in it which the javascript pulls and parses. That part works fine. Where I get into trouble is finding out if the next image is loaded so I can allow the user to click to the next image. My first attempt was with the image objects img.complete and something like:

function loadWait () {   if ( !nextImage.complete ) {	  setTimeout('loadWait()',1000);	  return;   }   state = 'loaded';   alert ('loaded');

Then the onClick on the image is:

function advance() {   if (state != 'loaded') {	  return;   }   document.getElementById('bg').src = nextImage.src;   ... snip ...}

Snipped out the code that loads that starts the next image preloading (XML parsing, and I am sure it is working properly and pulling the right src out of the file. I checked with alerts and the values of the srcs)However, with that, when the loading was complete, and I click on it, I get a blank image. Unless I wait about 10 seconds after the loading is done, then the image displays normally. Also, I noted the nextImage.complete goes true instantly after changing the src. (I had an alert(nextImage) the line after, and it returned true. So, I figure I am probably doing this wrong. So, after a quick peruse of the site again, I found the onload trigger. So, my next attempt was just setting it's onload to call a function that just called the loadWait() function, and pulled the check of nextImage.complete.The first time, it worked, and I was happy. Then I reloaded the page, and the onload never fired off again, and I was saddened. As far as I can tell, onLoad is only called when the image is actually downloaded from the server, and is ignored if the image is cached. And yes, the onload is set before I change the src for the image.So, my question is, what am I doing wrong? Am I just missing something stupid that will make this work nicely?There is also a (possibly) related issue. When I try to re-centre the next image on the page, the width and height attributes of the image do not change after I change the src. So the image's left and top are aligned as if it was the previous image. I tried recentering using nextImage.width and height, but they both are 0. My desk is developing a dent from me bashing my head into it with frustration.Any suggestions and help will be appreciated by me and my desk. Thanks in advance.

[jeffman]

As you've seen, polling the state of an object in transit is messy. Using an arbitrary unit of time like 10 seconds can lead to all kinds of problems, depending on the speed of the client's internet connection.A much better way to go about this is to wait for the image's load event to fire. This way, you don't need any special code that waits and repeatedly checks on the state. Your script simply does nothing until the event fires.

[Zash]

As you've seen, polling the state of an object in transit is messy. Using an arbitrary unit of time like 10 seconds can lead to all kinds of problems, depending on the speed of the client's internet connection.A much better way to go about this is to wait for the image's load event to fire. This way, you don't need any special code that waits and repeatedly checks on the state. Your script simply does nothing until the event fires.

I tried using the onload event. It fires intermittently. I have waited minutes for it to fire and it never does. (I had an alert in the onload event so I know it fired, and the alert never pops up).

[jeffman]

I've always had success with the image.onload event when working with JavaScript image objects, not simply image elements. I mean something like this:var im = new Image();im.onload = function () {alert("hello")};im.src = "path/to/image.gif";It is perfectly safe to do this and no extra memory drain even when the images are also being loaded in the HTML. (I mean, the image is not downloaded twice.) It could be this is in fact the way you've been doing it, in which case this advice doesn't help. I don't know.Edited.

[Zash]

I've always had success with the image.onload event when working with JavaScript image objects, not simply image elements. I mean something like this:var im = new Image();im.src = "path/to/image.gif";im.onload = function () {alert("hello")};It is perfectly safe to do this and no extra memory drain even when the images are also being loaded in the HTML. (I mean, the image is not downloaded twice.) It could be this is in fact the way you've been doing it, in which case this advice doesn't help. I don't know.

Yeah, that's more or less what I have:

nextImage = new Image();nextImage.onload = function () {   alert('Onload done.');   bg.src = nextImage.src;}nextImage.src = l.getAttribute('bg');

The onload fires intermittently, and I am not sure why. And I know that won't do what I ultimately need it to do, but, I am just trying to figure out why onload is not working.

[jeffman]

What browser are you testing this in? I assume l is a reference to a page element? Have you tried the operation using a hard-coded value for the image URL (just as a test)?

[Zash]

l is a reference to an element from the xml that it is loading the address list from.

[Ingolme]

With the onload event, you have to watch out. If an image is already in the cache, Internet Explorer fires it the moment you set the src attribute, so you should put the event handler before setting the src attribute.

var img = new Image();img.onload = function() {}img.src = "URL";

Edit: This was just a reminder. I was referring to Deirdre's Dad's code, which may have problems.

[jeffman]

Yes, that's a good call. I suppose I wrote in a hurry. For anyone still following this thread, I have made the correction above.

[Zash]

I have found the issue. The script was loading a bunch of small images (interface buttons and stuff) in rapid succession, and the webserver was throwing 403s because it thought someone was trying to DoS it. (Got a message from the server admin wondering why I was triggering DoS warnings on my own website). The webserver paranoia level has been reduced, and now it works.So, it wasn't a code issue. Thanks for the help everyone.