Skip to main content

Preloading Images with JavaScript

To reduce loading times and unexpected behavior, it can be desirable to load images into the browser's cache as soon as a page is loaded, especially when those images will not be needed right away. This page explains how to use JavaScript to load images into the browser's cache.

Step 1: Create a JavaScript Image Object

One of the built-in object types in JavaScript is the Image object. This object can be used to represent an HTML image tag on the page. The following code demonstrates how to create a JavaScript Image object:

<script type="text/javascript">
var my_image = new Image();
</script>

Step 2: Load an Image File into the Object

The image object created above is empty. It has no image file associated with it. To load an image into the object, simply update the code as follows:

<script type="text/javascript">
var my_image = new Image();
my_image.src = 'someimage.jpg';
</script>

The Image object, represented by the my_image variable, now contains the someimage.jpg image. As a result, that image has now been loaded into the browser's cache.

Demonstration of Preloading

To demonstrate the preloading of the image, I will use the following code. This code creates an empty image object, then allows the user to press a button to load the image. The image in this example is 6.2 MB in size, so it will take a while to load even on a broadband connection.

Using the onload image event, a function will be called as soon as the image has finished loading, notifying the user that the image has been loaded into the cache.

<script type="text/javascript">
var my_image = new Image();

// we will call this function when the image has finished loading
function notify_complete()
{
    alert('The image has been loaded into the browser cache.');
}

function load_image()
{
    // call the notify_complete function when the image has loaded
    my_image.onload = notify_complete;

    // load the image
    my_image.src = 'someimage.jpg';
}
</script>

Demonstration #2

Once an image is preloaded with JavaScript, you can take advantage of the cached image using only its filename. It's not necessary to keep using the JavaScript variable that you loaded the image into.

To demonstrate this, I wrote the following code. First, you can press a button to preload the image. After it has finished loading, the page displays a button that allows you to use the preloaded image in an image tag, using only the image filename. Even though we aren't using the variable that we loaded the image into, the image will still show up right away because it's in the cache.

<script type="text/javascript">
var my_image2 = new Image();

// notify the user that the image has been preloaded, and reveal the
// button to use the preloaded image
function notify()
{
    document.getElementById('preloadbutton2').style.display = 'none';

    document.getElementById('after_preload').style.display = 'block';
}

function preload()
{
    my_image2.onload = notify;

    my_image2.src = 'bigsaturn.jpg';
}

// using only the file name, we can take advantage of the preloaded image
function use_preloaded_image()
{
    document.getElementById('saturnplaceholder').src = 'bigsaturn.jpg';
}
</script>
<input type="button" 
    id="preloadbutton2" 
    value="Preload Image" 
    onclick="preload();this.value='Loading. Please wait...'" />

<div id="after_preload" style="display: none">
<input type="button" value="Use Preloaded Image"
onclick="use_preloaded_image()" /><br />
<img src="blank.jpg" id="saturnplaceholder" width="500" />
</div>

Get help with games!