Fade onload.. bit harder than it sounds :)

Fade onload.. bit harder than it sounds :)

Hi everybody.
I need to be steered in the direction for this project and came here for some help.
picture this:a grid (10 x 10) of 50px by 50px pictures. [thats 100 images]
The rest of the web page loads fully before these images start loading (so the user isnt waiting for ever if they have slow internet)
Then the 1st image loads and fades in. Once the 1st image has finished its fade animation (or even half way through if thats possible?) the second image loads and fades in.. this continues untill all the images have loaded.

Currently I have it working so it loads each image in turn with javascript but I cant get it too fade.

  1. var loadingImage = false;
    function LoadImage(imageName,imageFile)
    {
      if ((!document.images) || loadingImage) return;
      loadingImage = true;
      if (document.images[imageName].src.indexOf(imageFile)<0)
      {
        document.images[imageName].src = imageFile;
      }
      loadingImage = false;
    } LoadImage('0','images/0.jpg');











And the img tags look like this (they are in an unordered list, 10 images per li)

  1.       <img name="0" onLoad="LoadImage('1','images/1.jpg')" />
          <img name="1" onLoad="LoadImage('2','images/2.jpg')" />
once i get it working i plan to have a better way of importing the images with php so the user doesnt have to enter 100 blooming img tags with correct image names. But thats another day.

how do i incorporate the fade into this please :) ?

thanks in advance