The image-cycling feature of the Picky Picky Game prototype depends on using JavaScript to load images. If you click on the Cycle button before the images have been prloaded, then nothing visible happens—it appears to have failed. There is no way for the user to see whether the images have loaded or not. I have attempted to add such an indication, only to be thwarted by what appear to be bugs in the web browsers I have tried it on.
The theory is as follows. In JavaScript, you preload an image
resource by creating an Image object and assigning
the URL to its src attribute. So far this is
fairly uncontroversial. You can also, allegedly, assign a
JavaScript function to the onload attribute of the
Image object and it will invoke this function when
the image has finished downloading. Thus we might have:
var im = new Image();
im.ipanel = ipanel; // Used in the onload handler
im.onload = function () { preloadOnload(this.ipanel); }
im.src = inf.src;
The event handler is, I believe, called in the context of the
object that triggers it: in this case the Image
object. That means that the keyword this refers to
the Image object. Using the ipanel
attribute I added to the image object, it invokes
preloadOnload with the information it needs. (The
name ipanel is an index in to an array of panel
descriptions.)
Based on the above, we can do the following. First, replace the
Cycle buttons in the skin files with an animated image saying
LOADING. Second, maintain a
count, for each panel, of the number of images still to be
preloaded. When an image triggers its onload
event, decrement the counter. When it reaches zero, replace the
LOADING... image with the Cycle button. Voilà!
My first attempt at getting this to work involved yet more
JavaScript debugging on Safari. I ended up adding lots of
alter commands to the event-handling functions,
none of which got triggered. I concluded that I had
been mistake in thinking that onload habdlers
applied to image objects, and gave up and fixed some other bug.
Monday morning I checked the Picky Picky Game site and
discovered to my chagrin that the alerts do
appear—in Mozilla Firebird. As a result many visitors
were getting weird pop-up messages which made them think the
whole site was exploding or something.
I got home and decided to try out Venkman, the JavaScript debugger bundled with Mozilla. After only moderate pain I made some progress, and managed to get the event handlers to be called sometimes. I also managed to get the debugger in to a state where it refused to run, or to stop, or something. Whatever it was, it was stuck on an old version of the page and I could not debug the new version. After I poked it a few times the whole browser crashed. Nevertheless, once I had restarted Mozilla, visiting the pages (sans debugger) seems to work! The LOADING... animation plays below each image, and when they are ready the Cycle button replaces it. Great!
Camino 0.7, being Gecko-based, also works, once you persuade it to refresh its cached copy of the JavaScript.
Microsoft Internet Explorer for the Mac version 5.2 seemed to respond to the onload handlers at first, but now no longer seems to work. Like Safari, one is left with the LOADING... animation playing forever, which obviously is not acceptable. On the other hand, once it had crashed and been restarted, MSIE works fine. Perhaps it was crahsed by reloading the same JavaScript file once too many times? I have also tried it in Microsft Internet Explorer for Windows 5.5 and it works.
Opera 5.0 on Linux fails the same way as Safari (the onload events apparently never being triggered). On the other hand, its cycling looked wrong anyway, since the pictures would not resize...
Based on this rather spotty success rate I think I will upload the modified JavaScript to caption.org so I can try it out on a wider variety of browsers than what I happen to have at home. Hope this does not cause too much inconvenience...