IMG 요소를 빨리 비우는 방법은 무엇입니까?

Question

모달 이미지 갤러리를 만들었습니다. 사용자가 다음 이미지를보고 다음을 클릭하면 내가 좋아하는 뭔가를 실행

document.getElementById('gallery-image').src = newSRC; 

내 문제는 사용자가 이미지가 실제로 변경 곳 옆에 클릭 할 때의 지연이 있다는 것입니다. (새로운 이미지가로드되기 때문에). 사용자가 다음에 클릭 할 때 이미지 요소를 "비우기"를 원합니다. 나는 이것을 시도했다 :

document.getElementById('gallery-image').src = ''; 
    setTimeout(function(){ 
     document.getElementById('gallery-image').src = newSRC; 
     }, 100); 

를 사용할 수 없다. 새 이미지로드가 시작될 때까지 어떻게 IMG 요소를 "비울 수 있습니까?"

Answer 1

. 귀하의 질문은 slide projector 슬라이드 변경과 비슷한 효과를 만들기를 제안하는 것처럼 보였으므로이 답변을 염두에두고 작성했습니다.

1. 일시적으로 1x1 크기의 투명 GIF 대신 빈 문자열로 src 속성을 설정합니다. 이것은 당신이 시도한 것과 가장 유사하며 아마도 가장 간단한 방법 일 것입니다.

   아래의 데이터 URI는 Blank image encoded as data-uri이며 Internet Explorer 8 이상 및 다른 주요 브라우저에서 작동해야합니다. 데이터 URI를 사용하면 웹 서버에 별도의 파일을 저장하고 페이지가로드 될 때 미리로드 할 필요가 없습니다. 페이지의 레이아웃을 유지하기 위해 img 요소의 width 및 height 속성을 설정해야 할 수 있습니다.

   이 코드는 시간 지연이 시작될 때 이미지를 미리로드하지 않으므로 (가능할 수도 있지만) 명백한 지연 시간은 프로그래밍 된 시간 지연과 소요 시간의 합계입니다 이미지를로드합니다. 브라우저가 이미 이미지를 캐시했거나 웹 서버가 로컬 네트워크에있는 경우 로딩 시간은 거의 0에 가깝습니다.

   var gi = document.getElementById('gallery-image'); 
   gi.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; 
   setTimeout(function(){ 
       document.getElementById('gallery-image').src = newSRC; 
   }, 100); 
   

2. 일시적 display: none;을 설정하고, 시간 지연이 경과 된 이미지가로드되면 변경을 취소 할 onload 함수를 사용한다. 아래 코드는 시각 지연 시작시 이미지로드를 시작합니다.이 지연은 시청자의 연결 속도에 따라보다 일관된 명백한 지연을 초래할 수 있습니다.

   var gi = document.getElementById('gallery-image'); 
   var delayElapsed = false; 
   var imageLoaded = false; 
   
   gi.style.display = 'none'; 
   
   setTimeout(function(){ 
       delayElapsed = true; 
       maybeShowImage(); 
   }, 100); 
   
   gi.onload = function() { 
       imageLoaded = true; 
       maybeShowImage(); 
   }; 
   gi.src = newSRC; 
   
   function maybeShowImage() { 
       if (!delayElapsed || !imageLoaded) { 
        return; 
       } 
       gi.style.display = ''; 
   } 
   

3. 위를 수행, 대신 visibility: hidden;을 설정합니다. 이 경우 display: none;과 같은 페이지 레이아웃에는 영향을 미치지 않습니다.

   // [...] 
   
   gi.style.visibility = 'hidden'; 
   
   // [...] 
   
   function maybeShowImage() { 
       if (!delayElapsed || !imageLoaded) { 
        return; 
       } 
       gi.style.visibility = ''; 
   } 
   

Answer 2

당신은 이미지를 숨길 수있는 다음 재표이 ...이 작업을 수행하는 세 가지 방법이 있습니다

// Hide 
document.getElementById('gallery-image').style.display = "none"; 

// Show 
document.getElementById('gallery-image').style.display = "";