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!

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

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>

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

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?

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.