Loading image fadeIn with CSS + Javascript

Example

I've deliberately made the image quite a large filesize so you'll have a chance to see the 'loading…' message before it fades out.

The code

The photo is a straightforward image in a div. Each has an id:

<div id='photoholder'>
<img src='/images/ithaka.jpg' alt='Photo' id='thephoto' />
</div>

The 'loading…' image is set as the background to the photoholder div, and the photoholder is sized to match the photo.

#photoholder {
  width:450px;
  height:338px;
  background:#fff url('/images/loading.gif') 50% 50% no-repeat;
}
#thephoto {
  width:450px;
  height:338px;
}

To prevent a cached photo from displaying before it has been faded in, when need to make the photo hidden. JavaScript is used to write a style rule so that users without JavaScript enabled will not have the photo permanently hidden:

document.write("<style type='text/css'>
  #thephoto {visibility:hidden;} </style>");

Note that document.write does not work when XHTML is properly sent as application/xhtml+xml. You will either have to use HTML or serve your document as text/html.
Once everything on the page has loaded (crucially this includes images), an onload event is triggered, calling our initImage function:

window.onload = function() {initImage()}

The initImage function makes the photo completely tranpsarent by using the setOpacity function to set its opacity to zero. The photo can then be made visible and faded in using the fadeIn function:

function initImage() {
  imageId = 'thephoto';
  image = document.getElementById(imageId);
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(imageId,0);
}

The setOpacity function is passed an object and an opacity value. It then sets the opacity of the supplied object using four proprietary ways. It also prevents a flicker in Firefox caused when opacity is set to 100%, by setting the value to 99.999% instead.

function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;
  
  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";
  
  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;
  
  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;
  
  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
}

The fadeIn function uses a Timeout to call itself every 100ms with an object Id and an opacity. The opacity is specified as a percentage and increased 10% at a time. The loop stops once the opacity reaches 100%:

function fadeIn(objId,opacity) {
  if (document.getElementById) {
    obj = document.getElementById(objId);
    if (opacity <= 100) {
      setOpacity(obj, opacity);
      opacity += 10;
      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
    }
  }
}

Accessibility

This implementation caters for all combinations of JS and CSS; that is to say the photo can always be seen once it has loaded.

CSS & JS	'loading…' image displayed, photo fades in once loaded.
No CSS or JS	No 'loading…' image, photo appears once loaded.
CSS but no JS	'loading…' image displayed, photo appears once loaded.
JS but no CSS	No 'loading…' image displayed, photo either appears or fades in once loaded (depending on why there's no CSS).

All the scripts and style sheets should be held in their own files to fully separate the content, presentation and behaviour layers (they are coded into the head here for demonstration purposes).

Source URL: http://clagnut.com/sandbox/imagefades/