DonalOBrien.net
JavaScript in Safari
26 January 2007 10:05
I have recently been developing an app in JavaScript, which uses the complete property of the Image class. I finished the app, using Firefox for testing along the way, in about 90 minutes. When I went to test it on other browsers, it wouldn't work in Opera or Safari.

The problem with Opera was that I was creating a <div> element using document.createElement() and then setting it's innerHTML property to <img id="..." ... />. When I checked the complete property, it was never being set to true. I got around this by using document.createElement() to create the <img> element as well (and then using appendChild() to stick it in the <div>). Great!

Next, I went to check it again in Safari. No go! It appears that Safari knows about the complete property, but it's value is always undefined. Eventually (after about another hour), I came up with this solution:

  var im = document.createElement('img');
  // set it's properties and add it to the div

  function isImageLoaded(img) {
    if (img.complete == undefined) {
      if (img.getAttribute('completed') == undefined) {
        img.setAttribute('completed', false);
        img.onload = function() { img.setAttribute('completed', true); };
      }

      return img.getAttribute('completed');
    }
    return img.complete;
  }


The conclusion: JavaScript is a great, dynamic language that can be used to spice up your webpages. However, doing anything remotely interesting can require that you jump through a couple of hoops (some of them might even be on fire) in order to get it working on all of the common browsers.

Look out for my updated gallery app coming soon. This is where I used this technique. I will also post this as a more complete guide as soon as I get chance.