Prioritised Image Preloading In JavaScript

Image preloading was one of the earliest uses of JavaScript. To increase the responsiveness of rollover images (images that changed when the mouse pointer moved over them) JavaScript was used to preload the images (download them from the server in advance). When the mouse moved over an image, the browser already had the new image in its cache and so the visitor did not have to wait for the image to be downloaded. While modern internet connections are much faster, latency (the delays in communicating with a remote machine) means that using an image preloader still makes a site feel more responsive.

Image preloading has another important use in modern web development. Web-based applications are becoming increasingly sophisticated, rivalling dekstop applications in their functionality. Waiting for images to load, especially when those images comprise part of the basic user interface, harms the user experience. ImagePreloader allows applications to preload a large number of images in a prioritised order and monitor the entire process.

Using ImagePreloader

Download one of the files listed above and upload it to your website. ImagePreloader also requires the OnloadScheduler, a small JavaScript object that handles the scheduling itself. Link to them from your page with code such as:

<script type="text/javascript" src="OnloadScheduler.js"></script>
<script type="text/javascript" src="ImagePreloader.js"></script>

The schedule function

To use ImagePreloader, schedule images to be preloaded using the schedule function. This function takes up to four parameters:

url

the URL of the image to be preloaded

priority

the priority to use when scheduling the preloading

onload

a function to call if the image has loaded successfully — if this parameter is not specified or is not a function, no function will be called when the image has loaded successfully

onerror

a function to call if the image has failed to load — if this parameter is not specified or is not a function, no function will be called when the image has failed to load

The URL may be either an absolute URL (for example, http://www.example.com/logo.png), or a path relative to the current page (for examlpe, logo.png). Priorities are described in detail in the OnloadScheduler article — in brief, a lower number represents a high priority. The onload and onerror functions, if specified, are attached to the onload and onerror handlers, respectively, of the Image object created to preload the image.

For example:

// preload logo.png (priority 0 is implied)
ImagePreloader.schedule('logo.png');

// preload important.png and display a message if it fails
ImagePreloader.schedule(
    'important.png'
    0,
    null,
    function(){
      alert('Something went wrong')
    });