Often times, we need to “preload” an image into browser’s cache for performance concern. For instance, we have a mouseover event and the image needs to be update without any delay. This “Preloading” stuff can be achieved in two ways , either JavaScript or HTML code.

Javascript

We can “preload” an image with the following Javascript.

<script type="text/javascript">
if (document.images) {
    imgPreload = new Image();
    imgPreload.src = "/preload-image.jpg";
}
</script>

We also can “preload” few images with the following Javascript.

<script type="text/javascript">
if (document.images) {
    imgPreload1 = new Image();
    imgPreload1.src = "/preload-image1.jpg";
    imgPreload2 = new Image();
    imgPreload2.src = "/Preload-image2.jpg";
}
</script>

HTML

What about Javascript is disabled? Here is another dirty trick in HTML. Just load an image and hide it by specified the width and height equal = 1 :) , who bother?

<image src="/preload-image1.jpg" width="1" height="1" border="0" />
Any Java questions or problems? please post at this JavaNullPointer.com forum, see you there ~