Image Loaded Script


javascript stories
Image Loaded Script
Nav scripts
Image Popup windows

Coding Stories
Old printer meet windows 7
CSS and Printing
Bricolage on Linux
Hating the Gnome
Installing Bricolage
Perl: Make XML for Image Import

This is an example of real world scripting. In a perfect enviornment, all servers would work equally well with all browsers, and scripts like the image loaded javascript would not be necessary. "Image Loaded" is a script that exists because the Safari browser does not work well with Spinbox ad servers.

The problem is that Safari implements some code in its "HTTP SIMPLE" http protocol that causes Spinbox to not always return graphics. With HTTP Simple enabled, Safari makes multiple requests of the spinbox server, and terminates its requests before Spinbox can return the requested data.

Smaller blocks of data return quickly, but graphics can take time to return, and sometimes this results in a blank ad loading. Safari's Activity window records these as "zero byte resources".

This is not too bad on a page (though advertisers and ad sales people would disagree) but having a blank pop up ad occur is universally unacceptable. Users already hate them, having a big blank window block their reading really gets their dander up.

So, in order to keep the users happy, and the ad sales folks happy, and to keep my boss happy (whether or not he knew it was a problem) I added a little javascript to the pop up page that calls Spinbox.

Script Source

What the script does, is simple and yet cunning. You can see the html for the popup base page in the block above. You can also see it if you view source on a Macworld or Maccentral popup.

It appears that the page loads as normal. The javascript call to Spinbox occurs as the body is loading, and there is a function to resize the page in the body that is called by the window.onload handler once the page loads.

The first subtle nuance is in the fact that the onload handler is called in the body. The script could be in the header, but the onload handler needs to be in the body so that the document.images array exists and is either filled or is in the process of being filled.

The next subtle nuance is the assignment of document.images[0] to the variable myimage. If document.images contains no data, myimage is null, and the page loads normally. If it contains data, the script runs and the page gets resized properly. IF, however, the array is in the process of being filled, Javascript waits for the array to finish being filled with data before assigning that data to the myimage variable.

None of what I've described is in a book. It has all been discovered through hours of trial and error in an attempt to find out first, why Safari and Spinbox don't get along, and second, how to get around the problem. Hopefully, a future version of Safari will have a more robust version of HTTP Simple. Until then, this script continues to ensure that end users get their daily dose of popup content on Macworld and Maccentral.