Preload Images
Return to the Index
I have included images in the popup, but they are slow to display when the user does a mouseover.
You should load the images (for popups) at the time the page is loaded. The browser will store them in its cache, and they will be available from cache when the user does the mouseover.
Mouseover the yellow links below to see the difference. (Both images are about 50K jpegs).

Mouseover here to see a popup with an image that was preloaded.

Mouseover here to see a popup with an image that was NOT preloaded. Notice that you will have to wait until the image arrives before the popup will appear.
Note that you can only do this demo once. When the second image finally does arrive, it will be displayed, and it, too, will be cached. It you view this page a few minutes from now, that second image will still be in cache, so you won't have to wait for it. If you really need to see this demonstration again, first clear the browser's cache.

  • At the bottom of the page, add the following just ahead of the </body> tag.
      <script language=javascript>
        pic1=new Image(); pic1.src="path_If_Required/PictureName.jpg";
        pic2=new Image(); pic2.src="path_If_Required/AnotherPictureName.jpg";
        pic3=new Image(); pic3.src="path_If_Required/Background.gif";
      </script>

      </body>
      </html>

  • Be sure the path and PictureName you use here for the preload are EXACTLY the same as the path and PictureName used in the <img> tag in your popup. Otherwise, the browser cache-manager won't recognize them as the same image, and the preload will be wasted.
  • If you use a background image (token BACKGROUND) in your popup(s) don't forget to preload that image also. (pic3.src in the above code)
  • We place this at the END of the <body> because we don't want to start downloading the popup pictures until the main page is displayed on the screen. If it were in a <script> tag in the header, then the popup pictures would start downloading ahead of the main page pictures, and that would delay the display of the main page.
  • ADVANCED: If you have a lot of images to preload, you can save coding by doing the preloading in a javascript loop.

      <script language=javascript>

      preLoadImageList= new Array( "path_If_Required/PictureName.jpg",
         "path_If_Required/AnotherPictureName.jpg",
         "path_If_Required/Background.gif" );
      preLoadImageDummy = new Array();

      for( x=0; x < preLoadImageList.length; x++ ) {
         preLoadImageDummy[x] = new Image();
         preLoadImageDummy[x].src = preLoadImageList[x];
      };

      </script>
      </body>
      </html>

  • If you have placed the preloads at the END of the page, then there is never a need to preload any images that are a part of the main page html. Only preload those images that appear in popups, or as the second part of an image swapping function.
  • Some authors have asked about preloading (in the Home Page) images which are needed in a subsequent page. This strategy takes advantage of the "wasted time" that the reader spends absorbing the Home Page, and while he is reading the Home Page, additional images are downloaded so that later pages can be loaded quickly. If you want to use this technique, be sure that all the images for popups in THIS page are at the top of your list, followed by images that are being downloaded as a convenience for later pages.
Please let me know if you encounter problems.Modified by REB,June 1, 2004