Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Location
    Madrid
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Delay on page load for simple randomized header

    Hi all -

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

    www.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:

    Code:
    // 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:

    Code:
    <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!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by frostis21 View Post
    :

    Code:
    <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

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Location
    Madrid
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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! -

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by frostis21 View Post
    I suppose this is the downside of bundling in js libraries instead of writing original efficient code.
    Yes, quite so!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •