Image loading

Solved a slight issue with the design of the pattern pages. Because the image of the entire pattern is a background image, loaded via CSS it was loading AFTER all the rollover images. As a result, the odds are people on slower connections gave up as the main image was taking too long to appear, so the page looked rubbish.
The answer turned out to be simpler than I thought. Obviously, the main image needed to be loaded via HTML before the rollover images start to load. Because the rollovers load in the order in which the user is likely to be looking at them, even if they have not all yet loaded, the page is effectively "operational" because the first rollovers have loaded by the time the visitor hovers over them.
I added a new element to the CSS:

#preload {
display:block;
position:absolute;
margin:0px 0 0px 0px;
overflow:hidden;
}

And then used that to load the image before all the others by placing this DIV at the top of the containing element code:

div id="preload"
img src="il-jang/Taegeuk-Il-Jang.jpg" alt="Taegeuk Il Jang"/
/div

(Please forgive the omission of the opening & closing brackets - blogger wants to display output, rather than raw code!)

Of course, this means the main image is called twice, once through the HTML, then lastly through CSS, but because it's the same image, any half decent browser will make the second call from it's own browser cache so it works virtually instantaneously.

Incidently, anyone viewing the pattern pages and not able to see the entire pattern on screen should try one of my favourite browser shortcuts (it works in IE and Firefox). Just hit the F11 key and your browser will go full screen, showing you more of the page at once. Hit F11 again to close full screen mode.