Delay on page load for simple randomized header

frostis21

08-20-2010, 11:17 AM

Hi all -

I´ve added a randomized header script to my page :

www.escalamadrid.com/test_1/ (http://escalamadrid.com/test_1/)

The code is working correctly but due to the page load time - there is a delay in the new header image appearing when switching pages.

Here is the Javascript:

// JavaScript Document

var chosenImage=new Array();
chosenImage[0]="header_01.jpg";
chosenImage[1]="header_02.jpg";
etc....

var chosenAltCopy=new Array();
chosenAltCopy[0]="escalar madrid";
chosenAltCopy[1]="escalar madrid";
etc....

var getRan=Math.floor(Math.random()*chosenImage.length);

function randomImage()
{
document.getElementById('randomImage').setAttribute ('src', 'Site/images/header/'+chosenImage[getRan]);
document.getElementById('randomImage').setAttribute ('alt', chosenAltCopy[getRan]);
}

The function is called from the html page using the following:

<body onload="randomImage()";>

...so my question is - Is there anyway to avoid this delay or will i be forced to grin and bear it due to the weight of the pages i´m loading in.

Any ideas greatly appreciated!

Philip M

08-20-2010, 12:12 PM

:

<body onload="randomImage()";>

...so my question is - Is there anyway to avoid this delay or will i be forced to grin and bear it due to the weight of the pages i´m loading in.

A script called onload will only execute after the page has completely loaded.
But unless you are using a dial-up connection your page must be very weighty for the delay to be noticeable. You could have a default image which is replaced after x seconds by the random one.

Jessica Ennis ... the world is her lobster ... Athletics commentator, BBC TV

frostis21

08-20-2010, 12:42 PM

Think it's more likely to be the weight of attached files rather than the connection that's the problem. As well as 3 different css files - i´m also loading in the following js files / jquery libraries.

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="Scripts/randomizer.js"></script>
<script type="text/javascript">

I suppose this is the downside of bundling in js libraries instead of writing original efficient code.

As for your other suggestion of randomizing images - it would work but i really wanted a different header for page visited than a rotating header.

Thanks for your help anyways! -

Philip M

08-20-2010, 01:27 PM

I suppose this is the downside of bundling in js libraries instead of writing original efficient code.

Yes, quite so! :)