호버에서만 사용되는 이미지를 미리로드하는 방법은 무엇입니까?

하나의 배경 이미지로 시작하여 다른 이미지로 변경되는 링크가 있습니다. 두 배경 이미지 모두 CSS에 설정되어 있습니다. 내 브라우저 (그들 중 하나)는 실제로 호버링 할 때까지 호버 이미지를로드하지 않는 것 같습니다. 그러나 몇 초 동안 빈 이미지로 연결됩니다 (매우 느린 연결에서) 새 이미지를로드하는 데 걸립니다. 호버에서 지연 시간이 발생하지 않도록 브라우저가 호버 이미지를 미리로드하도록 권장하는 방법이 있습니까?

1) CSS 스프라이트 사용 (이것이 선호되는 방법입니다).

2) 숨겨진 div에 이미지를로드하십시오. div에 이미지를 배치하고 div의 CSS display: none;를 숨기도록 설정하십시오.

3) CSS로 이미지를로드하십시오 .

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}

4) 이 JavaScript를 사용하십시오

<script language="JavaScript">

function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
}
</script>

Javascript 솔루션이 마음에 들지 않습니다. 지저분하고 유지 관리가 어렵고 JS가 비활성화되면 완전히 실패합니다.

현대적인 해결책은 CSS Sprites 를 사용 하는 것입니다. 시도해보십시오. 왜 그렇게하지 않았는지 궁금 할 것입니다.)

순수 CSS를 사용하여 이미지를 미리로드하는 방법에 대한이 링크를 찾았습니다.

http://www.thecssninja.com/css/even-better-image-preloading-with-css2

호버에서 다른 배경 이미지를 변경해야 할 때 효과적이었습니다.

CSS 위에 이것을 추가하십시오 :

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />

danp이 제안한 것처럼 스프라이트 라우트를 사용하면 스프라이트를로드하기 전에 여전히 문제가 있습니다. 나는 스프라이트를 좋아한다고 말했다. 쉽게 만들려면 Steve Souders 의 스프라이트 도구 를 사용하십시오 .