SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why do my img rollover nav menu take so long to load the images?

    Hi there,

    My site is www.jh-webdesign.co.uk/test. Try it for yourself once you have cleared your cache

    I have been thoroughlt testing the site in all conditions but something has come up which has surprised me somewhat. The time it takes to load the a:hover images in my nav-menu. It is very slow and I am not sure why as each image is only around 5kbs in size.


    Any ideas why it is doing this?

    Cheers

    James
    Last edited by redhillccwebmas; Jul 26, 2006 at 16:12.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Your site seems to be down as I get invalid hostname message.

    You should never change images on a:hover anyway because its much too slow. You need to preload the image and one way is to apply the rollover image to the background of the parent li and then just cover it up with the anchor which contains the normal image.

    then on hover you just make the anchors background transparent and the rollover image is revealed. The images are already loaded and cached ready for use.

    Here is a basic demo of how you would go about it when you have different images to rollover each time.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    ul#test{
     padding:0;
     margin:0;
     list-style:none;
    }
    #test li{
     width:80px;/*size of image*/
     height:80px;/* size of image*/
    }
    #test li.first{ background:url(on.gif) no-repeat left top;}/* this holds the rollover state of the image1*/
    #test li.second{background:url(on2.gif) no-repeat left top;}/* this holds the rollover state of the image2*/
    #test li.third{ background:url(on3.gif) no-repeat left top;}/* this holds the rollover state of the image3*/
    #test li.fourth{background:url(on4.gif) no-repeat left top;}/* this holds the rollover state of the image4*/
    #test a{
     display:block;
     width:80px;
     height:80px;
    }
    #test li.first a{background:url(off.gif) no-repeat left top;}/* this holds the normal state of the image1*/
    #test li.second a{background:url(off2.gif) no-repeat left top;}/* this holds the normal state of the image2*/
    #test li.third a{background:url(off3.gif) no-repeat left top;}/* this holds the normal state of the image3*/
    #test li.fourth a{background:url(off4.gif) no-repeat left top;}/* this holds the normal state of the image4*/
    ul#test a:hover{background:transparent}
    /* on hover we just hide the anchor and let the image underneath show through. 
    This makes for pre-loaded rolovers unlike changing the image on hover which is slow.*/
    /* the above code assumes a different image for each anchor but is much simpler if only one image is used as the individual classes are not necessary. */
    </style>
    </head>
    <body>
    <ul id="test">
      <li class="first" ><a href="#"></a></li>
      <li class="second"><a href="#"></a></li>
      <li class="third"><a href="#"></a></li>
      <li class="fourth"><a href="#"></a></li>
    </ul>
    </body>
    </html>
    Hope that helps

  3. #3
    Chillin like a Villain DaStuff's Avatar
    Join Date
    Jul 2003
    Location
    Huntington Beach
    Posts
    649
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a thread where a few different ways to rollover link we're used. You can compare this code w/ yours and see what the difference is. (or even use this code I do and it works fine).

    http://www.sitepoint.com/forums/show...light=trifecta
    • Follow the dancing banana

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I should point out that the method mentioned in that thread doesn't address the issue of pre-loading the images as it loads another image on hover which shold be avoided as already mentioned above (It does address the image replacement issues though)

    The trifecta button mentioned in that thread does pre-load the images but then it would becasue if you look it has my name in the credits lol


Bookmarks

Posting Permissions

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