On hover load image

Soldato
Joined
31 May 2006
Posts
4,239
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!
 

AJK

AJK

Associate
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?
 
Soldato
OP
Joined
31 May 2006
Posts
4,239
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>
 

AJK

AJK

Associate
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).
 
Soldato
OP
Joined
31 May 2006
Posts
4,239
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!?
 

AJK

AJK

Associate
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?
 
Soldato
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.
 
Soldato
OP
Joined
31 May 2006
Posts
4,239
Location
127.0.0.1
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.
 
Soldato
Joined
23 Nov 2007
Posts
4,939
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.
 
Back
Top Bottom