Javascript preload images for css background-image change - Stack Overflow

admin管理员组

文章数量:1299986

I am developing a website which requires the background image of a div to change on hover of a link.

The way it works is by:

<a href="index.php" title="Home ">
 <li id="current">
   Home<br \>
   <span class="nav_desc">Text text</span>
 </li>
</a>
<a href="about.php" title="About" id="about-link" 
   onmouseover="hover('about');" 
   onmouseout="hoverClear();">
 <li id="about">
  About<br \>
  <span class="nav_desc">About me</span>
 </li>
</a>
<a href="more.php" title="More" 
   onmouseover="hover('portfolio');" 
   onmouseout="hoverClear();">
 <li id="more">
  More<br \>
  <span class="nav_desc">More More More
  </span>
 </li>
</a>

js:

function hoverClear(){
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect.png)");
}
function hover(hover){
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect-"+hover+".png)");
}

So, when a link is hovered it does a function to change div background image. But the issue is when the page is first loaded and the links hovered for the first time there is slow loading of the image.

But once they have loaded it works seamless. I expect this is an issue with it needed to be loaded. So is there a way I can preload the images before hand and still use the same method for the hover.

I am developing a website which requires the background image of a div to change on hover of a link.

The way it works is by:

<a href="index.php" title="Home ">
 <li id="current">
   Home<br \>
   <span class="nav_desc">Text text</span>
 </li>
</a>
<a href="about.php" title="About" id="about-link" 
   onmouseover="hover('about');" 
   onmouseout="hoverClear();">
 <li id="about">
  About<br \>
  <span class="nav_desc">About me</span>
 </li>
</a>
<a href="more.php" title="More" 
   onmouseover="hover('portfolio');" 
   onmouseout="hoverClear();">
 <li id="more">
  More<br \>
  <span class="nav_desc">More More More
  </span>
 </li>
</a>

js:

function hoverClear(){
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect.png)");
}
function hover(hover){
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect-"+hover+".png)");
}

So, when a link is hovered it does a function to change div background image. But the issue is when the page is first loaded and the links hovered for the first time there is slow loading of the image.

But once they have loaded it works seamless. I expect this is an issue with it needed to be loaded. So is there a way I can preload the images before hand and still use the same method for the hover.

• javascript
• css
• image-preloader

Share Improve this question Follow edited Oct 6, 2011 at 12:12 megakorre 2,2231616 silver badges2323 bronze badges asked Oct 6, 2011 at 11:49 ryryanryryan 3,9261313 gold badges4545 silver badges7272 bronze badges 1

• @alex: That's worth a proper answer, it really is the solution. – thirtydot Commented Oct 6, 2011 at 11:56

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Stack your images as one image, and then add a class that shifts the image's background property to the appropriate offset.

Not only does this turn multiple images into one HTTP request, it also means you don't have to bother writing code to preload the hover state of the images.

This is called a sprite sheet.

You can make a sprite image, i.e. put the two images together into one. Then you just change the background position to show the other part of the image. If the element is for example 20 pixels high, you move the background position by 20 pixels:

function hoverClear(){
  $('.navReflect').css("background-position", "0 0");
}

function hover(hover){
  $('.navReflect').css("background-position", "0 -20px");
}

As it's only a single image, the alternate look is loaded from the start. This will also reduce the number of requests to the server.

You can ever put more images together like this. You can see an example at the top right corner of my website, where a single image is used for two different flags each in two different states.

pretty simple to preload images, something like:

var img = new Image();
img.src = "/path/to/image.jpg";

This could be in a window.load or dom:ready event somewhere

you can use this solution. http://www.gayadesign./diy/queryloader-preload-your-website-in-style/

本文标签： Javascript preload images for css backgroundimage changeStack Overflow