Help with preloading images

Discussion in 'Javascript' started by Gary Hasler, Jan 25, 2008.

  1. Gary Hasler

    Gary Hasler Guest

    I just can't get them to preload! I have menu buttons with .gif
    background images which the browser doesn't seem to get around to
    downloading until everything else on the page is loaded (which makes the
    buttons transparent until then), so I want to preload them. Plus there
    are "hover" versions in red color which I want to preload for the normal
    reasons. Example here:
    http://test.thelogconnection.com/stockplan_A.php?Blue_Ridge
    It's the second row of buttons with rounded corners that I'm referring
    to.

    Here is the code I'm using:
    In the HEAD:

    <script language="JavaScript" type="text/javascript" >
    var preload = new Array();
    function PreloadImageList () {
    for (i=0; i<PreloadImageList.arguments.length; i++) {
    preload = new Image();
    preload.src = PreloadImageList.arguments;
    }
    }

    function OnLoadFn ( ) {
    //-- PRELOAD UP BUTTON IMAGES
    PreloadImageList
    ('images/Btn_Stockplan_Us.gif','images/arrow-forward_U.gif');
    }

    //-- LOAD NORMAL BTN IMAGES NOW (PREVENTS TRANSPARENT BUTTONS WHILE PAGE
    LOADS)
    PreloadImageList ('images/Btn_Stockplan_C.gif',
    'images/Btn_Stockplan_N.gif', 'images/Btn_Stockplan_Cs.gif',
    'images/Btn_Stockplan_Ns.gif', 'images/Btn_Stockplan_U.gif');
    </script>
    </head>

    <body class="body1" onunload="OnUnLoadFn()" >
     
    Gary Hasler, Jan 25, 2008
    #1
    1. Advertisements

  2. Gary Hasler

    Gary Hasler Guest



    of course it would be nice if my OnLoadFn was actually called
    onload...duhh!!!!
    But the small button backgrounds still don't preload?...
     
    Gary Hasler, Jan 25, 2008
    #2
    1. Advertisements

  3. Gary Hasler

    RobG Guest

    I think your question would be much better answered if asked in a CSS
    group:

    <URL: http://groups.google.com.au/group/comp.infosystems.www.authoring.stylesheets?hl=en&lnk=li
    You can do what you want without any preloading, including swaping the
    images:

    1. Join your over and out images to make one image
    2. Set the background so only the 'unhovered' image shows
    3. On hover, slide the background image to show the 'hover' image
    4. On un-hover, slide it back

    You can do all that with just CSS and A elements - no script required
    or preloading.

    CSS Design: Mo' Betta Rollovers
    The language attribute is deprecated, so remove it. Keep type.
    You can initialise an array using [].
    It is a convention that functions starting with a capital letter are
    constructors. Use: preloadImageList

    Do not use the function name when accessing the arguments object, just
    use arguments.

    It is (marginally) faster to store the length property in a variable
    than access it every time, and you could use a while statement for a
    bit more speed:

    var i = arguments.length;
    while (i--) {



    preload.src = arguments;

    You want to pre-load them, so don't wait for onload. :)


    But as noted above, there is no need to preload images if you use CSS
    techniques to slides a single image rather than script to swap them.
     
    RobG, Jan 25, 2008
    #3
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.