Removing pause at start of banner rotation...

BTW Not sure if this the right section to post in :huh:

I used a simple online Java banner rotator generator to rotate two images both with their own URL. The site is locally hosted at the moment, but I have changed the URL's for example purposes. I then simply pasted this generated code into the relevant area via Zen Cart banner manager:

<script type="text/javascript"> var imgs1 = new Array("/images/banners/free_box_banner.jpg","/images/banners/free_shipping_banner.jpg"); var lnks1 = new Array("http://www.mysite.com/page.html?id=25","http://www.mysite.com/index.php?main_page=shippinginfo"); var alt1 = new Array("All Orders Include A Free Gift Box!","Free Shipping Worldwide"); var currentAd1 = 0; var imgCt1 = 2; function cycle1() { if (currentAd1 == imgCt1) { currentAd1 = 0; } var banner1 = document.getElementById('adBanner1'); var link1 = document.getElementById('adLink1'); banner1.src=imgs1[currentAd1] banner1.alt=alt1[currentAd1] document.getElementById('adLink1').href=lnks1[currentAd1] currentAd1++; } window.setInterval("cycle1()",5000); </script>

<a href="http://www.mysite.com/page.html?id=25"" id="adLink1" target="_top">
<img src="/images/banners/free_box_banner.jpg" id="adBanner1" border="0" width="537" height="80"></a>

The display time between each rotation is set to 5 seconds. However on initial loading of the site their is a 10 second pause before the next banner shows up.

Can anyone see anything in the above code which would cause this initial 10 second delay between rotation? If so how can I remove it?

Thanks :smile:

When the page loads, this script won't start until EVERYTHING on the page has completed the load. Also, as the script you have loads the banners as required, this will cause a certain lag time. So the things I would change are firstly, I would add in a pre-loader, so that all images are ready for use as soon as the script requires them. If you don't do this, then the script waits 5 seconds, and then attempts to show the image. As it's not currently in the DOM, it then loads the image, which takes an extra couple of seconds.

Absolute

Absolute:

I would add in a pre-loader

Thanks for your reply Absolute :smile:

How what and where would I do this?

Thanks.

Quick google will show you examples of this Javascript. There are so many ways to do this, you would need to decide which one is best for you. Just search for "Javascript Image Preloader".

Absolute