동일한 기능에서 단일 요소의 스타일을 여러 번 변경하십시오 (기능 종료시 최신 스타일 만 표시)

여러 이미지를 한 세트 위에 겹쳐서 설치했습니다 (image1 = 일반 아이콘, image2 = 강조 표시된 아이콘).동일한 기능에서 단일 요소의 스타일을 여러 번 변경하십시오 (기능 종료시 최신 스타일 만 표시)

내 목표는 아이콘을 강조 표시하고 처리 한 다음 아이콘을 다시 정상으로 설정하는 것입니다. 또한 가능한 한 빨리 처리해야합니다. 병목 현상은 "강조 표시"를 표시하는 해결 방법입니다.

이를 위해, 난 그냥 전환하고있어 .style.visibility = {, "숨겨진" "볼 수"}

제가 보는 동작은, 최신 스타일이 표시되어 있는지이며, 함수가 종료 할 때까지 업데이트되지 않습니다. .style.visibility 전환

또는 해제 .style.display와에가
- 올바른 행동을보고하지 않았나요 다시 그리기 강제로 : SO에 내 연구에서, 나는 다음과 같은 발견했습니다. 최신 업데이트는
사용의 setTimeout 예상대로 (콜백, 0) 또는 setInterval을 (콜백, 0)
- 동작 해 보여. 그러나 브라우저가 "최소 대기 시간"을 적용하여 코드가 필요한만큼 빨리 실행되지 않습니다.
- 하여 setInterval() 함수의 구현은 기능는 (한 번 선택한 후 unhighlight 처리하기 위해 두 번) 한 동작

필요

I 코드를 업로드를 수행하기 위해 두 번 호출 될 것을 요구

나는 마지막 스타일이

<!doctype html> 
<head> 
<title>test redraw</title> 
</head> 
<body> 
    <img id="logo" 
     src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA 
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 
    9TXL0Y4OHwAAAABJRU5ErkJggg==" 
     alt="Red dot from wikipedia" /></img> 


    <script> 
     function pausecomp(ms) { 
      ms += new Date().getTime(); 
      while (new Date() < ms) { 
      } 
     } 
     function hide_then_show() { 
      var id = document.getElementById("logo"); 
      pausecomp(1000); 
      id.style.display = "none"; 
      id.parentNode.style.display = "none"; 
      id.parentNode.style.display = "block"; 
      pausecomp(1000); 
      id.style.display = "block"; 
      id.parentNode.style.display = "none"; 
      id.parentNode.style.display = "block"; 
     } 

     window.addEventListener("click", hide_then_show()); 
    </script> 
</body> 
</html>

어떤 제안 표시되고 있음을 입증하는 빠른 샘플 코드를 첨부했습니다 감사하겠습니다. 이게 최선의 방법으로 접근하는지 모르겠다.

출처

2013-03-11 cheezy

글쎄, 나는 별도의 요소를 사용하지 않을 것이다. 나는 스프라이트 이미지를 사용하고 배경 위치 만 바꿀 것이다. – prodigitalson

http://www.w3schools.com/css/css_image_sprites.asp – Ben

브라우저가 작동하는 방식으로 먼저 스크립트를 실행 한 다음 페이지를 렌더링합니다. 태스크에 대해 ['setInterval()'] (https://developer.mozilla.org/en-US/docs/DOM/window.setInterval)을 사용할 수 있습니다. – Teemu

나는 setTimeout()을 제대로 사용하지 않고 있는지 의심 스럽다. 이 작업을 수행하는 방법은 다음과 같습니다.

function hide_then_show() { 
    var id = document.getElementById("logo"); 
    setTimeout(function() { 
     id.parentNode.style.display = "none"; 
     setTimeout(function() { 
      id.parentNode.style.display = "block"; 
     }, 1000); // Hiding time 
    }, 1000); // Delay between click and hide 
} 
window.addEventListener("click", hide_then_show, false);

실무 데모는 jsFiddle입니다. 당신은 바이올린을 가지고 놀고 지연을 조정할 수 있습니다. 얼마나 빨리 이미지 디스플레이를 전환 할 수 있는지보실 수 있습니다.

깜박이가 필요한 경우 이것을 확인할 수 있습니다. fiddle.

출처

2013-03-12 05:39:35 Teemu

감사합니다. 이것은 제가 작성한 것과 유익하고 비슷합니다. 성능은 요소별로 허용됩니다. 그러나 그것은 보이고 숨길 필요가있는 요소들을 100까지 얻을 수 있으며, 일들은 뒤떨어집니다. 그래서, 적은 수의 DOM 요소를 사용하여 (image_sprite 제안을 사용할 것입니다)이 방법과 함께 사용하겠습니다. – cheezy

동일한 기능에서 단일 요소의 스타일을 여러 번 변경하십시오 (기능 종료시 최신 스타일 만 표시)

답변

관련 문제