Preload Images With CSS or With JavaScript

For better display and visitor interaction, sometimes it is desirable for a web page to load images before they will be used. Mouseover images, for example, or images to be used in a slide show.

There may be a pause before an image is first displayed. The pause is the time it takes the browser to fetch the image. When images are preloaded, that pause is eliminated (provided the image preload is completed before it is displayed).

Deciding whether to preload images with JavaScript or with CSS and HTML

Part of the decision is of course your preference, which you would rather work with. The code for both the JavaScript and the CSS is further below.

Preloading Images with JavaScript —

With JavaScript, the browser must have JavaScript turned on. Most browsers do. Some don't.

Without JavaScript, the preloading will not happen. When the image is ready to be displayed, the browser will need to fetch it first.

If the preloaded images will be used only in mouseovers or other displays requiring JavaScript, then preloading with JavaScript may be the best choice. That way, if the browser's JavaScript is turned off, the images will not be preloaded, saving that much time and server resources, which is okay because the images won't be displayed anyway.

The JavaScript image preloading code may be put anywhere in the web page source code where JavaScript can run. This includes the HEAD area of the page, if desired — perhaps there is a reason the images must be loaded before any of the page content is displayed.

If all image display is done with JavaScript, then few, if any, SE spiders will index the image URL.

Preloading Images with CSS and HTML —

Preloading with CSS and HTML will work whether or not the browser has JavaScript turned on.

The CSS and HTML preloading code must be in the BODY area of the web page source code. It will not work in the HEAD area.

Spiders and robots can index the image URL.

Caveat

This applies to both the JavaScript and the CSS/HTML image preload code.

The image URLs in the preload code may be relative URLs or absolute http://... URLs. However, use the same URL when displaying the image.

Otherwise, the browser might not recognize it as the same image and go fetch it again.

JavaScript Image Preload Code

Here is the JavaScript code for preloading images.

The only customization it needs is the list of images to preload. Info is in the code.

<script type="text/javascript"><!--
// Image Preloader version 1.0
// Copyright 2009 Bontrager Connection, LLC
// https://www.willmaster.com/
//
// Leave the next line as is.
var preload = new Array();

// List the images to be loaded, each 
//   image assigned to preload[#], with 
//   consecutive numbering starting at 0.

preload[0] = "/images/imageA.jpg";
preload[1] = "/images/imageB.jpg";
preload[2] = "/images/imageC.jpg";
preload[3] = "/images/imageD.jpg";
preload[4] = "/images/imageE.jpg";

// Leave the next 5 lines as they are.
var loadedimages = new Array();
for(var i=0; i<preload.length; i++) {
loadedimages[i] = new Image();
loadedimages[i].src = preload[i];
}
//--></script>

CSS and HTML Image Preload Code

This is simply a div with CSS style "display:none;". The div's content is an HTML img tag for each image to preload.

It is prudent to specify a width and height of "1" in case a browser is surfing with CSS turned off. One-pixel square images would be little if any distraction.

<div style="display:none;">
<img src="/images/imageA.jpg" width="1" height="1" border="0" alt="Image 01">
<img src="/images/imageB.jpg" width="1" height="1" border="0" alt="Image 02">
<img src="/images/imageC.jpg" width="1" height="1" border="0" alt="Image 03">
<img src="/images/imageD.jpg" width="1" height="1" border="0" alt="Image 04">
<img src="/images/imageE.jpg" width="1" height="1" border="0" alt="Image 05">
</div>

Where To Put The Image Preload Code

The JavaScript code can be put in the HEAD or BODY area of the web page source code. The CSS/HTML code can be put only in the BODY area.

The optimum position depends on how the preloaded images will be used.

If the images will be used sometime after the web page has finished loading, such as for image rollovers, the preload code can be below the page content. This lets the content be displayed before the rollover images silently load in case they're needed. If the rollover is used before the image has finished loading, there will be a pause while the browser fetches the required image; otherwise, the preload has finished and there will be no such pause.

If the images will be used immediately, such as automatic background image changes, the preload is best placed somewhere above where the images will display.

Consider how the images will be used and place the preload code accordingly.

Notes

Preloading too many or too large images before page content is displayed encourages the impatient or those with painfully slow Internet connection speeds to click away and try a different website.

The JavaScript and the CSS/HTML image preloading code may both be used on the same web page.

Either or both versions of the code can be used more than once on the same web page to preload additional images at different points.

Image preloading is a way to load images into the browser before it is to be displayed. Then, when it is finally to be displayed, there will be no pause while the browser fetches the image.

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.