在悬停事件中更改图像时如何避免新的请求？

Question

I'm trying to create an event with jQuery that changes an image when the user hovers over it. The problem I have is that even though I have preloaded the image using jQuery, when the user hovers over the image, it makes a new request and loads the image again (it is already showed in the developers console as a preloaded image since the page was first loaded). I guess there is something wrong with the way I'm changing the CSS property with jQuery, but I can't find the right way to do it anywhere.

Here's the code:

HTML:

<div id="box" class="box">
</div>

CSS:

.box
{
height: 100px; 
width:  500px; 
border-radius: 15px;
background-color: #003366;
background-image: url('images/blue-box.jpg');
border:1px #003366;
box-shadow: 4px 5px 2px #888888;
}

JavaScript:

    $(document).ready(function() {


var preload = [
    'css/images/blue-box.jpg',
    'css/images/gray-box.jpg'
];

preloadImages(preload);

   function preloadImages(arrayOfImages) {
    $(arrayOfImages).each(function(){
    (new Image()).src = this;
    });
   }

$box = "#box";
$($box).mouseover(function()
{
    $($box).css("background-image", "url(' " + preload[1] + " ')");
});

});

Thanks in advance,

Diego.

Answer 1

move the preload array to global.

var preload = [
    'css/images/blue-box.jpg',
    'css/images/gray-box.jpg'
];

and call like this

$(function(){
preloadImages(preload);//call the preload functions 

})

And I suggest you to cache the static content resources. such as images, css. so that browser will read the cached images.

1. By using cache, whenever you request new image, based on your cache setting, Image will get appended a Expire headers for the response.
2. When the user request for the same image again, browser will load it from the cached images. (browser will issse HTTP 304 Not Modifi ed status). until unless user wants to clear the cache.