Risk of constant traffic when updating graphics using JavaScript?

Question

I'm using JavaScript to create a basic graphic clock display on an HTML page. I'm updating digit graphics (each digit updated only when necessary) using the standard DOM mechanism:

digitOne.src = "file/path/one.png";

The clock works fine, but I want to know whether all or some browsers will mindlessly fetch the image from my site every time the src attribute is changed, rather than cache a copy in RAM. I'm worried that in some cases, perhaps in older browsers, viewing the graphic clock will create data traffic constantly and chew through my monthly data allowance.

So I'm hoping someone can tell me whether this is a risk, or point me to a mechanism to swap graphics in JavaScript which guarantees that an existing image will be used from memory rather than trigger a network fetch every time.

(I have hunted around for a definitive answer to this, but couldn't find one. I've not used JavaScript for DHTML since 1999/2000, so I'm a bit behind the times. At least it's no longer necessary to write two versions of every JavaScript function, one for IE4/5 and one for Netscape 4.)

Answer 1

You don't have to worry about the traffic. It's easy to cache the images when initializing the application. Look into my example in the following JSFiddle: http://jsfiddle.net/pAwdC/. When I'm initializing the application I'm calling loadImages. This method creates img DOM element for each digit. It's src is being taken from the array imagesSrc. When the loadImages function is called the browser is making few HTTP get requests to the server:

Actually each request is made when:

current.src = imagesSrc[i];

is executed.

After the images are loaded, I'm just hiding them. When the images are with display: none or visibility: hidden the user cant actually see them but when you make these hidden elements visible no more requests are made, only eventual repaint, reflow/relayout, restyle are done by the browser. All elements are cached and displayed only when required. You can check your firebug or whatever other dev tool you're using that no more requests for these images are made.

Here is the code from my example:

var images = [],
    imagesSrc = ['https://lh3.ggpht.com/-107YXK-eAXs/UB6V49H9yuI/AAAAAAAACsY/69ceZJXaYZE/s1600/number-one-.png',
    'https://lh3.ggpht.com/-8rOrxAwDl48/Txf99Sus18I/AAAAAAAAL1w/VcmeP7rNFwY/s1600/number2c.png',
    'https://lh3.ggpht.com/-aGatHUidcGw/UG6Oh2HdWXI/AAAAAAAADQY/yc1CTC7cpOY/s1600/number3.png'];

function loadImages() {
    var current;
    for (var i = 0; i < imagesSrc.length; i += 1) {
        current = document.createElement('img');
        current.src = imagesSrc[i];
        images.push(current);
        current.style.display = 'none';
        document.body.appendChild(current);
    }
}

function showImage() {
    var current = showImage.current || 0;
    if (current >= 3) {
        current = 0;
    }
    hideImages();
    images[current].style.display = 'block';
    current += 1;
    showImage.current = current;
    setTimeout(function () {
        showImage();
    }, 1000);
}

function hideImages() {
    for (var i = 0; i < images.length; i += 1) {
        images[i].style.display = 'none';
    }
}

loadImages();
showImage();

For my example I need just a single instance of each digit. Of course for your clock you can create four instances (four img DOM elements) for each digit so that you can show duplicates.

For your application may be better approach will be to load the images on demand, but only once and then cache them. It's good to do this because the user may not stay on your page to see each digit (from 0 to 9) and you may improve a little your performance by this lazy loading. For this strategy you can check the flyweight pattern. It's main idea is to manage a set of reusable small objects and use them on demand, while controlling it's creation. Here is a UML class diagram which shows the structure of the pattern:

There are different variations of the approach I've mentioned. May be the most lightest variation you can do is to use a single image which contains all the digits. After that you can create different elements (for example div) with the size of a digit. When you set to these elements a background with specific position you can create all digits by loading only a single image. This will reduce your requests from 10 to just a single one. This approach is effectively used by facebook, for example.

If you need further assistance I'll be glad to help. ​

Answer 2

I would recomend to you using HTML5 canvas 2D drawing. It not requires any images at all and is currently supported by all newer version of all browsers even in IE. Check this out

http://www.neilwallis.com/projects/html5/clock/index.php

Read this simple yet great tutorial:

http://diveintohtml5.info/canvas.html