Entry

How do I preload images?

Mar 6th, 2000 03:26
Martin Honnen, Evan Panagiotopoulos,

Client side JavaScript starting with JavaScript 1.1 (NN3+, IE4+) has 
the 
  Image
object for that. You create an Image object and preload an image with
  if (document.images) {
    var image = new Image();
    image.src = 'whatever.gif';
  }
Then the image is asynchronically downloaded while the rest of the 
script/page is processed. You can then use that Image object in an 
onmouseover e.g.
  <A HREF="javascript: void 0"
     ONMOUSEOVER="if (document.images) {
                    document.imageName.oldSrc = document.imageName.src;
                    document.imageName.src = image.src;
                  }"
     ONMOUSEOUT="if (document.images)
                    document.imageName.src = document.imageName.oldSrc;
                 "
  ><IMG NAME="imageName" SRC="whatelse.gif" BORDER="0"></A>