<img> Firefox에서 src가 변경 될 때 깜박임

Question

목록의 이름 위에 마우스를 올리면지도의 src 속성이 해당 영역이 강조 표시된지도 이미지로 바뀌고, .attr() 만 사용한다는지도를 만들고 있습니다. jquery 메서드를 이렇게 변경합니다. 나는이 원활이 변경을 할 수있는 방법

$("img.map").attr("src","newmap.png"); 

이미지 변화가 먼저 이전이 사라 거기에 아무것도 표시되지 다음 새 이미지가 나타납니다 짧은 시간이있을 때 그것은 모든 브라우저하지만, 파이어 폭스에서 잘 작동, 크롬이나 IE와 같은 파이어 폭스에서 ??
(시간은 정말 짧지 만 디렉토리를 통해 마우스를 움직이면 마우스가 움직이는 동안 이미지가 사라집니다.)
또는 그 효과를 얻으려면 더 나은 방법을 알고 계십니까? 감사합니다

Answer 1

이미지를 미리로드 해보십시오. 새 이미지가 브라우저에로드 될 때 깜박입니다.

Answer 2

브라우저를 처음 참조 할 때 브라우저가 이미지를 다운로드한다는 문제가 있습니다.

나는 단지 하나의 요소의 src 속성을 변경하는 대신 두 개의 이미지 요소를 가지고 숨기거나 표시합니다.

Answer 3

src 특성이 분명히 변경 되었기 때문에 이러한 현상이 발생합니다. 새 이미지가 아직 다운로드되지 않았습니다. 따라서 서버에 요청을 보내고 src 속성이 이미 변경된 동안 응답을 모두 기다려야합니다. 이것은 당신이 거기서 아무 것도 볼 수없는 이유입니다. 이 문제를 해결하는 방법이 있습니다. 자바 스크립트에서 새 이미지를 소스로 사용하여 새 이미지 요소를 만듭니다. 표시하려는 이미지의 src 특성을 변경하는 onload 이벤트 처리기를 추가하십시오. 예, 이것은 미리로드하는 것이 약간 어려울 수 있지만 초기 페이지로드 시간이 줄어 듭니다 및 HTML을 복잡하게 만들지 않습니다.

Answer 4

내 머리 꼭대기에서 마우스를 가져 가면 호버 인 텐트와 배경 이미지의 조합이 도움이됩니다.

불필요하게 이미지를 다운로드하고 싶지 않으므로 호버 인 텐트가 좋습니다.

포함 된 div (또는 이미지 자체)에 원본 또는 마지막으로 본 이미지의 배경 이미지를 제공하면 깜박임 효과가 줄어 듭니다. 이 이미지 변경로드 시간이 다를 수 있으므로 일종의로드 아이콘을 표시 할 수있는 기회로 사용할 수 있습니다.

원래 이미지가 있고 영역을 가리킬 때마다 새 이미지를 추가하는 것이 더 바람직하다고 생각합니다. 그렇게하면 이미지 요소가 없을 때만 추가 할 수 있습니다 (HTTP 요청 저장). 심지어 더 우아한 변경 (예 : 원본보다 변색)을 수행합니다.

희망이 있습니다!