1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

On hover load image

Discussion in 'HTML, Graphics & Programming' started by tonyyeb, 17 Sep 2009.

  1. tonyyeb

    Mobster

    Joined: 31 May 2006

    Posts: 4,236

    Location: 127.0.0.1

    Hi all

    I have a list of items that when you hover over them it displays an image (using CSS). This is fine when the list is small but when the list is large it takes a while to load all the images... this then delays any javascript on the page from running until all the images are loaded.

    Is there a way to either:

    * Use javascript to make it so the image only loads when the link is hovered over?

    or

    * Allow the rest of the javascript on the page to run before the images are finished loading?

    I think i'd prefer the first solution if possible but i'm open to all ideas.

    Thanks in advance!
     
  2. LiE

    Capodecina

    Joined: 2 Aug 2005

    Posts: 21,273

    Location: Milton Keynes

    Why don't you use pure CSS?
     
  3. tonyyeb

    Mobster

    Joined: 31 May 2006

    Posts: 4,236

    Location: 127.0.0.1

    Hi

    I currently use CSS for this but I don't want the browser to load the image until the user hovers over the link. If this can be done in CSS alone then great! If you know how then even better!

    Cheers
     
  4. AJK

    Wise Guy

    Joined: 8 Sep 2009

    Posts: 1,722

    Location: UK

    Your description of the problem doesn't sound right... why is the browser loading all the images at once? It shouldn't be. Look at the following code:

    Code:
    <html>
    
    <head>
      <title>test</title>
      <style type="text/css">
    
        #testDiv:hover
        {
            background-image:url('image.jpg');
        }
      
      </style>
    </head>
    
    <body>
    
    <div id="testDiv">
      TEST TEXT
    </div>
    
    </body>
    
    </html>
    Here, image.jpg will not be fetched until the user hovers their mouse over testDiv... what are you doing differently which is causing all the images to load at once?
     
  5. tonyyeb

    Mobster

    Joined: 31 May 2006

    Posts: 4,236

    Location: 127.0.0.1

    CSS:

    Code:
    
    <style type="text/css">
    
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 30px; /*position where enlarged image should offset horizontally */
    
    }
    
    </style>
    
    
    Then each link/image is:

    Code:
    
    <a class="thumbnail" href="#thumb">Item Name<span><img src="images/item01.jpg" width="90" height="108" />Photo</span></a>
    
    <a class="thumbnail" href="#thumb">Item Name<span><img src="images/item02.jpg" width="90" height="108" />Photo</span></a>
    
    
     
  6. AJK

    Wise Guy

    Joined: 8 Sep 2009

    Posts: 1,722

    Location: UK

    If you've got an HTML image tag in the page, the browser will fetch the image when the page loads, regardless of whether the image is hidden via CSS - this would seem to be the issue. You'll need to load the image using CSS itself (see my example above).
     
  7. tonyyeb

    Mobster

    Joined: 31 May 2006

    Posts: 4,236

    Location: 127.0.0.1

    But the page is built using results from a database... this looks like i'm going to have page through the recordset twice? And create a Div for each entry? Or am I being a numpty!?
     
  8. AJK

    Wise Guy

    Joined: 8 Sep 2009

    Posts: 1,722

    Location: UK

    The only difference is that you'd be writing out to two different locations on the page. So in your style section you'd have:

    Code:
    #testDiv01:hover { whatever... }
    and then in the body of the page:

    Code:
    <div id="testDiv01"> ... </div>
    Most scripting languages shouldn't have an issue with this I would think?
     
  9. tonyyeb

    Mobster

    Joined: 31 May 2006

    Posts: 4,236

    Location: 127.0.0.1

    So still paging through the recordset twice but looks simple enough. Cheers.
     
  10. tonyyeb

    Mobster

    Joined: 31 May 2006

    Posts: 4,236

    Location: 127.0.0.1

    For reasons beyond my control, the only scripting language available is Javascript. I can't run javascript inside CSS declarations can I?
     
  11. robmiller

    Capodecina

    Joined: 26 Dec 2003

    Posts: 16,522

    Location: London

    Put the JavaScript code earlier than the images in the HTML, and it will run before the images are loaded. If it relies on the DOM at all, use one of the many methods to execute code when the DOM has loaded but before the page itself (and its images etc.) has loaded.
     
  12. tonyyeb

    Mobster

    Joined: 31 May 2006

    Posts: 4,236

    Location: 127.0.0.1

    Hi AJK

    This doesn't work in IE8. I have changed the image location and when I hover over the TEST TEXT nothing happens. In Chrome it repeats the image across the screen and isnt the correct size.
     
  13. Makhaira

    Mobster

    Joined: 23 Nov 2007

    Posts: 4,854

    Location: Lancashire, UK

    Ensure that you have declared your doctype as HTML Transitional.

    Be aware of course that if you're only loading images when the user hovers, you're likely to introduce delays into the responsiveness of your site.