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.)
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