호버 이벤트에서 이미지를 변경할 때 새로운 요청을 피하는 방법은 무엇입니까?

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; 
} 

자바 스크립트 :

$(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 

}) 

처럼 전화 그리고 이미지, CSS로 cache the static content resources.에 당신을 제안한다. 브라우저는 캐시 된 이미지를 읽습니다.

1. 캐시를 사용하면 캐시 설정에 따라 새 이미지를 요청할 때마다 이미지에 응답의 만료 헤더가 추가됩니다.
2. 사용자가 동일한 이미지를 다시 요청하면 브라우저는 캐시 된 이미지에서 해당 이미지를로드합니다. (브라우저는 HTTP 304 Not Modifi 상태를 발행합니다). 사용자가 캐시를 지우지 않을 때까지.