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.
|
|