Home > Articles > Web Development > Ajax and JavaScript

  • Print
  • + Share This
This chapter is from the book

Preloading Images

If you did this example with the files on your desktop, you probably didn't notice any problem with the images loading. However, if you posted this file and the images on a server and some random person loaded the page and started playing with your rollovers, they would probably notice a small lag between the time they rolled over the image and when it was actually replaced. This happens because the browser hasn't loaded the rollover images (the ones ending in "_on.gif") yet. In fact, it doesn't load those images until the user rolled over the image.

The way around this is to load the images into the browser's memory without showing those images to the user. Fortunately, JavaScript provides a relatively straightforward way to do this.

<script language="JavaScript">

// preload images
_newsOn = new Image()
_newsOn.src = "images/nav_news_on.gif"

 rollover functions

</script>

How the Code Works

We want to preload images at the same time the page loads, so we place the JavaScript statements in the header, but we don't put them inside of a function. This way, the images are preloaded when the page is.

  1. First, we create an image object. That's all this line is. We tell JavaScript, "There is an image, and it's called 'newsOn'." In this line we don't say anything about this image: not where it is, how big it is, nothing. We only state its name and the fact that it exists.

  2. Here's where we actually preload the image. We tell JavaScript that the image object's source is "images/nav_news_on.gif", and the browser goes to that location and loads the image data into the newsOn object.

  3. This image doesn't appear on the user's screen—it just lives inside the browser's memory.

Generally, it's safest to preload all the images involved in the rollover. In this case, that means both the images that are visible before the user moves his or her mouse and the rollover image itself. Example 1–6 shows what the whole preloading sequence looks like.

Example 1–6 Preloading sequence

// preload images
newsOff = new Image()
newsOff.src = "images/nav_news_off.gif"

newsOn = new Image()
newsOn.src = "images/nav_news_on.gif"

productsOff = new Image()
productsOff.src = "images/nav_products_off.gif"

productsOn = new Image()
productsOn.src = "images/nav_products_on.gif"

researchOff = new Image()
researchOff.src = "images/nav_research_off.gif"

researchOn = new Image()
researchOn.src = "images/nav_research_on.gif"

storeOff = new Image()
storeOff.src = "images/nav_store_off.gif"

storeOn = new Image()
storeOn.src = "images/nav_store_on.gif"

aboutOff = new Image()
aboutOff.src = "images/nav_about_off.gif"

aboutOn = new Image()
aboutOn.src = "images/nav_about_on.gif"

Once this code is in your page, all the images will load into the browser's memory before the user has a chance to move their mouse anywhere on your page. Once the page loads, the swapping of images will happen quickly and smoothly, and the user will not be distracted by slow-loading mouseovers.

The use of image objects gives us another benefit: We can use the imageName.src value elsewhere in our code, making it more readable. Example 1–7 illustrates what I mean.

Example 1–7 Simplified functions

function rollOver (imgName)
{
    document.images[imgName].src =
      eval(imgName + "On.src")
}

function rollOut (imgName)
{
    document.images[imgName].src =
      eval(imgName + "Off.src")
}

How the Code Works

See what we're doing differently? Instead of spelling out the image's name, we're just using the image object's src value. Confused? Let's back up a bit. We start with this line:

newsOn.src = "images/nav_news_on.gif"

and later on, if the user rolls over the research image, this occurs:

document.images[news].src = "images/nav_news_on.gif"

We can shortcut our code a bit by replacing the image's location with the src value:

document.images[news].src = newsOn.src

And translating that back into the dynamic JavaScript we're using, we come up with:

document.images[imgName].src = eval(imgName + "On.src")

Example 1–8 shows all of the JavaScript, combining the image preloading and the functions.

Example 1–8 All preloading JavaScript

<script language="JavaScript">

// preload images
newsOff = new Image()
newsOff.src = "images/nav_news_off.gif"

newsOn = new Image()
newsOn.src = "images/nav_news_on.gif"

productsOff = new Image()
productsOff.src = "images/nav_products_off.gif"

productsOn = new Image()
productsOn.src = "images/nav_products_on.gif"

researchOff = new Image()
researchOff.src = "images/nav_research_off.gif"

researchOn = new Image()
researchOn.src = "images/nav_research_on.gif"

storeOff = new Image()
storeOff.src = "images/nav_store_off.gif"

storeOn = new Image()
storeOn.src = "images/nav_store_on.gif"

aboutOff = new Image()
aboutOff.src = "images/nav_about_off.gif"

aboutOn = new Image()
aboutOn.src = "images/nav_about_on.gif"

function rollOver (imgName)
{
    document.images[imgName].src = eval(imgName +
"On.src")
}

function rollOut (imgName)
{
    document.images[imgName].src = eval(imgName + "Off.src")
}
</script>
  • + Share This
  • 🔖 Save To Your Account