0

我正在尝试使用 jQuery 创建一个事件，当用户将鼠标悬停在图像上时它会更改图像。我遇到的问题是，即使我已经使用 jQuery 预加载了图像，当用户将鼠标悬停在图像上时，它会发出一个新请求并再次加载图像（它已经在开发人员控制台中显示为自页面以来的预加载图像首次加载）。我想我用 jQuery 更改 CSS 属性的方式有问题，但我在任何地方都找不到正确的方法。

这是代码：

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] + " ')");
});

});

提前致谢，

迭戈。

4

1 回答 1

1

将预加载数组移动到全局。

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

像这样打电话

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

})

我建议你使用cache the static content resources.诸如图像、css 之类的。这样浏览器就会读取缓存的图像。

  1. 通过使用缓存，每当您请求新图像时，根据您的缓存设置，图像将附加一个过期标头作为响应。
  2. 当用户再次请求相同的图像时，浏览器将从缓存的图像中加载它。（浏览器将发布HTTP 304 Not Modifi状态）。直到除非用户想要清除缓存。
于 2013-04-07T03:49:31.787 回答