good ole image preloader...

Discussion in 'Javascript' started by bedges, Mar 21, 2006.

  1. bedges

    bedges Guest

    okay, the scenario:

    i have a header image which changes randomly across all pages in the
    site. that works fine. i also have an image preloader within the random
    header picker which theoretically loads the header image before the
    rest of the graphical content on the page. however, what appears to be
    happening, judging by the status bar messages, is that the banner
    always loads last.

    here's the random header code -

    function random_header()
    {
    no=Math.random()*14;
    no=Math.round(no);
    no = no + 1;
    bname = "banners/banner_" + no + ".jpg";
    preload=new Image();
    preload.src=bname;
    document.getElementById('rndimg').src=bname;
    }

    banners are all named sequentially, 'rndimg' is the blank header image
    having its source changed.

    any help is appreciated. thanks meantime :)
     
    bedges, Mar 21, 2006
    #1
    1. Advertising

  2. bedges

    RobG Guest

    bedges wrote:
    > okay, the scenario:
    >
    > i have a header image which changes randomly across all pages in the
    > site. that works fine. i also have an image preloader within the random
    > header picker which theoretically loads the header image before the
    > rest of the graphical content on the page. however, what appears to be
    > happening, judging by the status bar messages, is that the banner
    > always loads last.


    Why not randomise the banner on the server? Why rely on unreliable client
    scripting when there seems to be zero benefit?


    > here's the random header code -
    >
    > function random_header()
    > {
    > no=Math.random()*14;
    > no=Math.round(no);
    > no = no + 1;
    > bname = "banners/banner_" + no + ".jpg";


    Keep variables local if they don't need to be global. If your image names
    are in the range 1 to 15 inclusive:

    var bname = 'banners/banner_'
    + (Math.floor(Math.random()*15) + 1)
    + '.jpg';

    Or using bitwise OR instead of Math.floor:

    var bname = 'banners/banner_'
    + ((Math.random()*15 | 0) + 1)
    + '.jpg';


    > preload=new Image();
    > preload.src=bname;
    > document.getElementById('rndimg').src=bname;


    Here you immediately load the image into the banner, you've given 'preload'
    less than a millisecond to load and cache the image file. Also, it seems
    you are running this onload so the image doesn't start loading until the
    entire rest of the page has finished, making it more like a post-load
    function. The function does not start downloading the image until it is
    executed.

    You are probably better to use a default image if scripting is not
    available and replace the src with the random src using script:


    <img src="noScriptDefault.gif" alt="" name="bannerImg">

    <script type="text/javascript">
    if (document.images && document.images['bannerImg'])
    {
    document.images.bannerImg.src = 'banners/banner_'
    + ((Math.random()*15 | 0) + 1)
    + '.jpg';
    }
    </script>


    Presumably the banner is right at the top, so it should load very near the
    start anyway so any kind of preload is (almost) pointless. If you have
    lots of script and CSS, then maybe to a preload right after the title
    element will have a small benefit.

    But the effect of multiple simultaneous connections will dilute the value
    of pre-loading anyway. It was mostly useful for getting small button
    images to load before big banners, but here you want to load the banner
    first, which happens anyway.

    Test and see.


    > }
    >
    > banners are all named sequentially, 'rndimg' is the blank header image
    > having its source changed.



    --
    Rob
     
    RobG, Mar 21, 2006
    #2
    1. Advertising

  3. bedges

    bedges Guest

    unfortunately server-side randomising isn't an option in this case.
    however i used a modified version of your code snippet in the
    individual pages after the image appears and it seems to work a treat.

    many thanks for the help.
     
    bedges, Mar 21, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Patrick.O.Ige

    Ole ole

    Patrick.O.Ige, Jul 16, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    503
    Patrick.O.Ige
    Jul 16, 2006
  2. jj
    Replies:
    3
    Views:
    1,240
    bruce barker
    Jan 20, 2009
  3. FluxForums

    Image Preloader

    FluxForums, Feb 22, 2004, in forum: Javascript
    Replies:
    3
    Views:
    107
    Hywel
    Feb 22, 2004
  4. David

    Stop do while loop - image preloader

    David, Aug 10, 2005, in forum: Javascript
    Replies:
    4
    Views:
    168
    David
    Aug 10, 2005
  5. Image Preloader

    , Dec 4, 2005, in forum: Javascript
    Replies:
    2
    Views:
    100
Loading...

Share This Page