How to preload an image in JavaScript or HTML code?

By mkyong | Updated: August 30, 2012

Viewed: 118 (+1 pv/w)

Tags: image javascript

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?