Question

我正在尝试使用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] + " ')");
});

}）;

提前致谢，

迭。

Answer 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.，例如images，css。这样浏览器就会读取缓存的图像。

通过使用缓存，每当您请求新图像时，根据您的缓存设置，Image将为响应附加一个Expire标头。
当用户再次请求同一图像时，浏览器将从缓存的图像中加载它。（浏览器将发出HTTP 304 Not Modifi个状态。除非用户想要清除缓存。

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

1 个答案: