Как избежать нового запроса при смене изображения в событии наведения?

Question

Я пытаюсь создать событие с jQuery, которое изменяет изображение, когда пользователь на него нависает. Проблема заключается в том, что, хотя я предварительно загрузил изображение с помощью jQuery, когда пользователь наводил курсор на изображение, он делает новый запрос и снова загружает изображение (он уже отображается в консоли разработчика как предварительно загруженное изображение, так как страница была загружена впервые). Я думаю, что что-то не так с тем, как я изменяю свойство CSS с помощью jQuery, но я не могу найти правильный способ сделать это где угодно.

Вот код:

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

});

Заранее благодарен,

Diego.

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., такие как изображения, CSS. так что браузер будет читать кешированные изображения.

1. Используя кеш, всякий раз, когда вы запрашиваете новое изображение, в соответствии с настройками вашего кеша, в Image будет добавлен заголовок Expire для ответа.
2. Когда пользователь снова запросит одно и то же изображение, браузер загрузит его с кешированных изображений. (браузер будет выдавать HTTP 304 Not Modifi статус ed). пока пользователь не захочет очистить кеш.