How to add loading GIF to this JS function?

Hi,

I have this short JS function called 'init' that loads images from an array into a <div> one at a time, hiding them. It then creates a transparent sheet to go over the images for mouse events, and finally displays one of the images. I would like to have a loading gif play until the everything is done and the image is displayed. Would be grateful for any help on how to get this done -- thank you!

function init() {
  title = document.getElementById('title');
  sketchUpObj = document.getElementById('sketchUpObj');
  imageCount = imageFileNameArray.length;

  // load up the imageArray with the sketchUp images
  for (i = 0; i < imageCount; i++) {
    sketchUpImageArray[i] = new Image();
    sketchUpImageArray[i].src = imageFileNameArray[i];
    sketchUpImageArray[i].className = 'sketchUpImage';
    hide(sketchUpImageArray[i]);
    document.getElementById('sketchUpObj').appendChild(sketchUpImageArray[i]);
  }
//create a transparent sheet over the images so that the mouseevents go it it
  var sheet = document.createElement("DIV");
  document.getElementById('sketchUpObj').appendChild(sheet);
  sheet.id = "sheet";
  sheet.onmousemove = handleRotate;
  sheet.onmousedown = handleMouseDown;
  sheet.onmouseup = handleMouseUp;
  sheet.onmouseout = handleMouseUp;
  setOpacity(sheet, 0.0);

  currentPos = imageCount-1
  show(sketchUpImageArray[currentPos]);
}

Select allOpen in new window