마우스를 올리면 GIF가 시작되고 그렇지 않으면 일시 중지됩니까?

Question

그래서 저는 정적 인 건물 페이지의 사이드 바에 이러한 이미지를 갖기 위해 노력하고 있습니다.하지만 마우스 오버시 GIF로 애니메이션을 적용합니다. 현재 내 설정은 background-image CSS 속성 이미지를 정적 jpg로 정상적으로 설정하지만 mouseover에서 애니메이션 gif로 변경하는 것입니다. 내 요점을 더 잘 설명하기 위해 코드는 다음과 같습니다.

CSS :

이

#segments li a.fnb { 
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/fnb%21-small.jpg); /*fallback*/ 
} 

#segments li a.whhu { 
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/still.jpg); 
} 

#segments li a.fnb:hover { 
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549933.gif); 
} 

#segments li a.whhu:hover { 
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549841.gif); 
} 

내가 나머지를 아끼지거야, 내 포인트를 만들기 위해 필요합니다.

HTML은 :

<ul id="segments"> 
    <li><a href="http://collabprojekt.com/tagged/fnb!" class="fnb"></a></li> 
    <li><a href="http://collabprojekt.com/tagged/whhu" class="whhu"></a></li> 
</ul> 

이 사이트는 http://tcptest.tumblr.com, 그것은 현재 어떻게 작동하는지 확인하기 위해 이미지를 왼쪽 줄을 확인하십시오.

이 방법이 효과적이지만 문제는 첫 번째 호버의 경우 gif를로드해야하기 때문에 gif를로드하는 동안 상자가 비어있는 순간이 발생합니다. 이것은 큰 문제는 아니지만, 전문가가 아닌 것처럼 보입니다.

JS를 사용하여이 아이디어 (link)를 시도했지만 실패했습니다.

그래서 내 질문에 :이 임의의 빈 순간을 얻을 수 없도록 CSS 또는 다른 언어로도 이것을 수행하는 더 좋은 방법이 있습니까?

Answer 1

이미지를 미리로드하는 방법을 배우고 싶습니다. "HTML 프리로드 이미지"에 대한 Google 검색 결과를 얻으실 수 있습니다 ...

이 링크는 자바 스크립트를 사용하여 잘 된 것 같습니다.

http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001/So-You-Want-To-Pre-Load-Huh.htm

Answer 2

IMG 요소의 이미지를 페이지의 다른 곳에 포함하고 숨겨진 컨테이너 (CSS의 display:none 또는 visibility:hidden)에 넣을 수 있으므로 페이지가 처음로드 될 때로드되지만 보이지는 않습니다. 이렇게하면 캐시 호버 드 이미지 클라이언트 측에 제공되어야하므로 브라우저가 CSS에서 참조하는 : 호버 (hover) 이미지를 요청할 때 지연되지 않습니다.

브라우저에서 동일한 이미지를 볼 수 있도록 CSS에서 사용하는 IMGSRC 속성에서 동일한 파일 경로를 사용하려고합니다.

JavaScript 솔루션이 작동하지 않는 경우입니다. 위의 예에서

...

<!-- Cache Images --> 
<div style="display:none"> 
<img src="http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549933.gif" alt=""> 
<img src="http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549841.gif" alt=""> 
</div> 

편집 :수도 애니메이션에 따라 당신에 영향을 애니메이션 GIF와 추가 문제는 관계없이 ...이

애니메이션 (호버) 이미지가 미리로드되는지 여부에 관계없이로드 된 후에는 브라우저가 현재 표시되는지 여부에 관계없이 배경에서 이미지를 재생하는 경향이 있습니다. 따라서 이미지를 벗어나서 다시 움직이면 이미지에서 벗어 났을 때 애니메이션이 있던 곳에서 계속하기보다는 애니메이션을 '현재 위치로 점프'할 수 있습니다. 짧은 애니메이션이 아닌 긴 애니메이션의 경우 눈에.니다.

Answer 3

당신은 CSS를 통해 숨겨진 페이지 (display: none)에 DIV을 추가 할 수 있으며 거기에 애니메이션 GIF를위한 IMG 태그를 넣어. 이렇게하면 이미지가 페이지에 미리로드됩니다.

자세한 내용은 this link을 확인하십시오.