After having added some wallpapers to Vistered Little, I learnt that they will all be downloaded, regardless whether they are actually shown or not. That sums up quite a bit… The reason is, that the background selection does not display real thumbnails, but just tiny squares taken from the center of the wallpaper images instead.

That was easy – I thought. Thus I modified Vistered Little so that the menu would fetch its images from a separate directory (wallpapers/thumbs) and then prepared real tiny thumbnails (20×20 px). All and everything appeared to be great, even my Nokia E61 now showed the site without a glitch (it used to choke on the multi megabytes before), but… IE 6 would no longer refresh its background on a selection change 😦

The problem only occurs with Internet Explorer 6. IE 7 is ok, as is Firefox. I’m currently working on this bug… In the meantime, press F5 to refresh.

It appears as though programming real world browsers is a preview of living hell. IE 6 completely refuses to load images when requested by setting document.style.background, but happilly displays them if – by chance –  they have been loaded at least once before. Changing the background image within the onload event of an Image object did not work with Firefox 1.5, but works as advertised with both IE 6 & 7.

So here’s a code snippet that appears to work for FireFox (1.5), IE (6&7) and the Nokia E61 alike – the background is set both, immediately and within the onload event, if required 🙂

function setBackgroundWP(bgNumber,bgUrl) {
  var im = new Image();
  im.bgSty = "url('" + bgUrl + "') top center fixed";
  im.setBackgroundWPOnLoad = function() {
    if (document.body.style.background != this.bgSty) {
      document.body.style.background = this.bgSty;
    };
  };
  im.onload = im.setBackgroundWPOnLoad;
  im.src = bgUrl;
  document.body.style.background = im.bgSty;
  createCookie('wpcookie',bgNumber,7);
}

Disabling JavaScript reveals a tiny bug within Vistered Little: The initial background style refers to the wrong directory within functions.php.spitOutWallpaperCSS() :

// nono print "/images/" . $wallpaper . "') top center fixed; }n";
print "/wallpapers/" . $wallpaper . "') top center fixed; }n";