View Full Version : Javascript countdown help

01-03-2004, 07:35 PM

I not a javascipt programer, but I do know a bit of asp and php so I can kinda get around working out what someone has done if its not too complicated.

I downloaded a countdown script from Dithered (http://www.dithered.com/javascript/countdown/index.html) the other day. Its an image based counter.

It works fine with IE5 mac, mozilla and safari.

My problem with the script is with IE6 win, what happens is that IE6 keeps downloading the images as the counter counts. This makes the counter clunky and slow. IE6 also never stops working because of it, the little windows icon that moves to indicate downloading is always moving. If you hit stop the numbers dissapear and then it all starts over.

Strange thing is that it works fine on my local server. It also works fine on the dithered demo (http://www.dithered.com/javascript/countdown/example.html).

I suspect the problem is something with the path in linking the images. Locally and on the demo relative paths were used. On my site I had to use absolute paths like so" /images/nameofimage.gif" instead of "images/nameofimage.gif" becuase the counter appears in my sidebar which appears on all my pages some of which are not in the root.

Could anybody please take a look at it, or give some advice?
If anyone knows of any good image based Dom based javascript countdown timers it would be much appritiated.

You can see the timer on my site (http://www.aquaba.co.za).


01-03-2004, 07:40 PM
what you probably want to do is take all of the images that you are going to be using for the counter and pre load them into your browser that way you will not get the loading lag. and because it is changing every second you might want to make sure that the images are very small because if you are using 10 highres images it will create the load lag as well

hope it works out

01-03-2004, 07:43 PM
Thanks josses,

The number images themselves are tiney.
How can I peload the images?

01-03-2004, 07:58 PM

<script language="JavaScript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

this is a macromedia preload image script put the script in the head of the page

then in the onload of the body tag put the images with their location from the root folder into the function like above

put them in '' and seperate them with a ,

hope that works and www.wsabstract.com has a great tutorial on it as well

01-03-2004, 08:35 PM
Thanks will give it a try...

01-03-2004, 08:38 PM
sorry, one question, how does the code look for the onload body part, I understand the images part but not sure about the syantex for onload.

01-03-2004, 09:04 PM
so copy the script part into the head tag

and in the <body> tag place


<body onLoad="MM_preloadImages('image1.jpg','image2.jpg','...etc')">

01-03-2004, 09:26 PM
this is a simpler preload image script from wsabstracts.com free scripts archive

it is pretty self explanitory


Preload images script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!

var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()

//Enter path of images to be preloaded inside parenthesis. Extend list as desired.


you don't have to put the complete virtual image file path in
you can put all your Number image names in here

01-03-2004, 10:23 PM
If you want to do a fantastically easy job, you could utilize Pixy's (http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/) CSS Rollover method to change everything. Then you'd only have to wait for one image to load. Of course you'd have to rewrite the script from scratch, but... hey, a new project for me. Woo-hoo!

01-03-2004, 11:59 PM
Thanks for the help guys, gonna give that second script a try and see if it works...

01-04-2004, 12:02 AM
Found this preloader on the dithered site, I suppose I'll try this first because all the scripts there are supposed to be cross browser compatible.

function preloadImages() {
document.preload = new Array();
if (document.images) {
for (var i = 0; i < preloadImages.arguments.length; i++) {
document.preload[i] = new Image();
document.preload[i].src = preloadImages.arguments[i];

01-04-2004, 12:33 AM
being trying them out and I seem to be havig a problem with my blog management system Movabletype. Its wont save the template passed the preload function call on any of the above scripts.

Ps does anybody know how to append to the onload call in the body tag.