어떻게 이것을 사라지게 만들거나 AJAX 로딩 GIF가 다른 요소의 이동을 멈추게할까요?

Question

http://schnell.dreamhosters.com/randroll.php

'롤!'을 누를 때마다 gif가 나타나고 잠시 동안 사라지고 사라집니다. GIF가 모든 것을 아래로 이동 한 다음 사라질 때를 제외하고 모든 것이 뒤로 이동합니다. 이 gif를 이동시키지 않고 이동하는 방법이 있습니까? 절대 위치 지정 같은 것을 사용하지 않고?

Answer 1

는 그냥 <br>의 없애과 정적 높이 컨테이너에있는 GIF를 넣어 :

<button>Roll!</button> 
<div style="height:20px"><img id="loader" src="img/ajax-loader.gif" /></div> 

를 사용하여 별도의 CSS를 맛 여백을 조정합니다.

Answer 2

은 절대적인 위치 지정을 사용하여 정상적인 요소 흐름에서이를 제거하므로이 동작을 나타내지 않습니다. Job ™에 적합한 도구입니다.

Answer 3

예, 절대 위치 지정을 사용하려고합니다. 이렇게하면이 방법의 대부분을 얻을 것이다 : <center>가 (당신이 그것을 위해 CSS를 사용한다)과 같은

<img id="loader" style="position: absolute; display: none; left: 50%; margin-left: -110px;" src="img/ajax-loader.gif"> 

나는 인라인 CSS와 자바 스크립트를 사용하여 피하는 것이 좋습니다뿐만 아니라 HTML 요소 것입니다. 이 특정 요소의 CSS 규칙은

#loader { 
    display: none; 
    position: absolute; 
    left: 50%; 
    margin-left: -110px; 
} 

Answer 4

당신은 GIF에게 높이와 같은 부정적인 아래쪽 여백을 줄 수있을 것이다. 따라서 30px로 가정하십시오

#myGif { 
    margin-bottom: -30px; 
} 

Answer 5

왜 절대 위치를 사용하지 않습니까? 직관을 통해 정상적인 콘텐츠 위에있는 것으로 느껴 져야합니다.

해결 방법은 음수 여백을 사용하는 것입니다. 이미지의 너비가 40px 인 경우 -40px 여백을 사용할 수 있습니다. 나는이 전략을 절대적으로 추천하지 않는다 : 절대적.

편집 : 누군가가 나를 때렸다.

Answer 6

도움을 주셔서 감사합니다. 그러나 저는 자체 솔루션을 찾을 수 있었고, 제 독창적 아이디어보다 훨씬 효과적이라고 생각합니다. 당신은 페이지로 돌아가서 행동으로 볼 수 있지만, 호기심이 있다면, 내가 한 일이 여기에 있습니다. 나는 기본적으로 그냥 ...

$("button").click(function() { 
      var v = $("select").attr("value"); 
      --> $("#printout").addClass("load"); <-- 
      $.get("randloot.php", { "table" : v }, function(data) { 
       --> $("#printout").removeClass(); <-- 
       if(data.roll != 0) {  
        $('#printout').text("Roll - " + data.roll + 
             "\nArmor - " + data.armor + 
             "\nPrice - " + data.price + "gp"); 
       } 
       else 
        $('#printout').text("Oops"); 
      }, "json"); 
     }); 

<style type="text/css"> 
    .load { 
     background-image: url('img/ajax-loader2.gif'); 
     background-repeat: no-repeat; 
     background-position: bottom right; 
    } 

    #printout { 
     border: 1px black dotted; 
     font-size: 12pt; 
     text-align: left; 
     padding: 10px; 
     height: 100px; 
     width: 400px; 
    } 
</style> 

그리고 다음을 추가 ... 그리고 최종 결과는 우아하고 간결한 생각합니다. 언급 된 다른 솔루션보다 몇 줄 더 많을 수도 있지만 최소한의 조정만으로 더 많은 상황에 적용 할 수 있습니다.