The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

JavaScript Preload Images

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

Faster Page Rendering ...

Use JavaScript preload. Learn how to preload photographs and other web page images. Required for magic rollover effects. Create more efficient web pages. Load images faster and reduce page download times. Give your web pages a professional ambience. There appears to be much confusion about the subject of using JavaScript to preload bitmap images or photographs, particularly among those who are new to web authoring. This page demonstrates in the most simple terms, how images can be successfully preloaded using JavaScript.

Why Preload Images?

It is nearly always advantageous to preload photographs or other web images because the load requests are sent to the server earlier and multiple image load requests can be grouped and sent at the same time. This can improve overall load times considerably because the server can react more quickly and deal with multiple image requests at the same time. You should remember that a busy server can be dealing with thousands of requests a second and each new request goes to the bottom of the queue. Preloading can be a great way for your image load requests to get to the top of the queue more quickly and help you to achieve a more professionally presented web page.

If you are using special effects like magic rollover buttons then preloading your images becomes an absolute necessity because the special effect can be spoilt if the browser has to start loading the image after the special effect has been activated. Under certain circumstances some browsers will fail to display special effect images at all if the images have not been previously preloaded.

The Basic Principles

When your script instruct the browser to preload an image the browser loads the image then stores it in the browser cache where the image is then available to be displayed immediately or at some time in the future.

Let's start by studying a very basic web page in which we use JavaScript to preload an image and then use HTML to display that same image. One point that I think is worth emphasizing is that although JavaScript uses a variable to refer to the image (e.g. myPic.src) and HTML refers to the relative path of the image ('../images/black-cat.jpg') the browser automatically knows that they are one and the same image. You should also note that it is very good practice to always include the image width and height in both the JavaScript preload script and in the HTML image tag. In all cases, this creates a more efficient web page, speeds up image loading and provides a more professional display.

a basic web page that preloads and displays an image...

<html>
<head>

    <title>JavaScript Preloading Demo Page</title>

    <script type="text/javascript">
    <!--- HIDE FROM OLD BROWSERS

    // THESE TWO LINES PRELOAD THE IMAGE
    var myPic = new Image(300,250);
    myPic.src = "../images/black-cat.jpg"

    // END HIDING -->
    </script>

</head>

<body>

    <!-- THE HTML MARKUP TO DISPLAY THE IMAGE -->
    <img src="../images/black-cat.jpg" border="0" width="300" height="250">

</body>

</html>

Multiple Images

We now move on to a more advanced script that is suitable for preloading multiple images providing all the images are the same size. We introduce you to the principle of the string array (catPics) and the image array (myPics). In case you are wondering the myPics image array is created dynamically in the preload_images function. We have also provided the path name separately from the filenames and these are joined together in the preload_images function.

a page that preloads and displays three images, all the same size...

<html>

<head>

    <title>Preload Three Cats Demo Page</title>

    <script type="text/javascript">
    <!--- HIDE FROM OLD BROWSERS

    // THIS SECTION PRELOADS THE IMAGES

    var catPath = "..images/";
    var catWidth = 300;
    var catHeight = 250;

    var catPics = new Array (
        "black-cat.jpg",
        "gray-cat.jpg",
        "tabby-cat.jpg" );

    var myPics = preloadImages (catPath,catPics,catWidth,catHeight);

    function preloadImages(path,pics,width,height) {

        var images = new Array;

        for (var picNum=0; picNum<pics.length; picNum++) {
            images[picNum] = new Image(width,height);
            images[picNum].src = (path + pics[picNum]);
        }

        return(images);
    }

    // END HIDING -->
    </script>

</head>

<body>

    <!-- THE HTML MARKUP TO DISPLAY THE IMAGES -->
    <p><img src="../images/black-cat.jpg" border="0" width="300" height="250"></p>
    <p><img src="../images/gray-cat.jpg" border="0" width="300" height="250"></p>
    <p><img src="../images/tabby-cat.jpg" border="0" width="300" height="250"></p>

</body>

</html>

Varying Image Sizes

We now move on to an even more advanced script that is suitable for preloading multiple images of varying sizes. We introduce you to the principle of the two-dimensional string array (catPics) although we use the image array (myPics) in a similar manner to that used above. As above the myPics image array is created dynamically in the preload_images function and again we have provided the path name separately from the filenames and these are joined together in the preload_images function. The preload_images function is slightly different because it is taking its information from a two-dimensional array instead of a one-dimensional array.

a page that preloads and displays five images, all of different sizes...

<html>
<head>

    <title>Preload Five Cats Demo Page</title>

    <script type="text/javascript">
    <!--- HIDE FROM OLD BROWSERS

    // THIS SECTION PRELOADS THE IMAGES

    var catPath = "../images/";
    var catPics = new Array;

    catPics[0] = new Array("black-cat.jpg",300,250);
    catPics[1] = new Array("gray-cat.jpg",280,266);
    catPics[2] = new Array("tabby-cat.jpg",255,232);
    catPics[3] = new Array("siamese-cat.jpg",320,200);
    catPics[4] = new Array("kitten-cat.jpg",200,150);

    var myPics = preloadImages(catPath,catPics);

    function preloadImages(path,pics) {

        var images = new Array;

        for (var picNum=0; picNum<pics.length; picNum++)
            {
            images[picNum] = new Image(pics[picNum][1],pics[picNum][2]);
            images[picNum].src = (path + pics[picNum][0]);
            }

        return (images);
    }

    // END HIDING -->
    </script>

</head>

<body>

    <!-- THESE LINES DISPLAYS THE IMAGES -->
    <p><img src="../images/black-cat.jpg" border="0" width="300" height="250"></p>
    <p><img src="../images/gray-cat.jpg" border="0" width="280" height="266"></p>
    <p><img src="../images/tabby-cat.jpg" border="0" width="255" height="232"></p>
    <p><img src="../images/siamese-cat.jpg" border="0" width="320" height="200"></p>
    <p><img src="../images/kitten-cat.jpg" border="0" width="200" height="150"></p>

</body>

</html>

A Most Important Point

No matter how efficiently you preload and manipulate your images it is all to no avail if you image file sizes are too large because they have not been sized and optimized. Failing to size and optimize your images properly could mean that a web page with multiple photographs could for example take 5 minutes to download from the Internet instead of just 10 seconds.

 

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Preloading Web Images Use JavaScript to preload images faster and reduce page download times. Learn how to preload photographs and create more efficient web pages. Essential for magic rollover buttons and other effects.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
Featured Preloading Images Pages
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England