On hover load image

tonyyeb · 17 Sep 2009 at 08:56

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!

LiE · 17 Sep 2009 at 09:19

Why don't you use pure CSS?

tonyyeb · 17 Sep 2009 at 09:28

msm722 said:
Why don't you use pure CSS?

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

AJK · 17 Sep 2009 at 09:42

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?

tonyyeb · 17 Sep 2009 at 09:47

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>

AJK · 17 Sep 2009 at 09:54

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).

tonyyeb · 17 Sep 2009 at 09:56

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!?

AJK · 17 Sep 2009 at 10:17

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?

tonyyeb · 17 Sep 2009 at 10:54

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

tonyyeb · 17 Sep 2009 at 11:50

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

robmiller · 17 Sep 2009 at 11:52

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.

tonyyeb · 17 Sep 2009 at 12:02

AJK said:
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?

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.

Makhaira · 17 Sep 2009 at 12:09

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.