Wenn der Ajax Loader geladen ist, wird der Text und die Schaltfläche darunter nach oben bewegt

Question

In meiner Seite benutze ich Ajax Loader gif. Wenn die Schaltfläche angeklickt wird, wird der Ajax Loader angezeigt, der Text darunter bewegt sich jedoch nach oben und ich möchte, dass sie konstant sind. Ich meine, dass ich mich nicht bewegen soll. Gibt es eine Möglichkeit, dies zu tun? Danke für die Hilfe.

Es kann auch von hier aus zu sehen:

http://www.dilyurdu.com

function AjaxLoader() 
{ 
    document.getElementById("translation").innerHTML="<img src='ajax-loader.gif' />" 

    $.ajax({ 
     type: "POST", 
     url: "test1.php",   
     success: function(response) { 

      $("#translation").html("hello"); 

     } 

    }); 


} 

<div class="informationArea"> 
    <h2><span id="infoaream">caballo</span></h2> 
    <div id="wordDetailArea"> 
     <h2>Translation:</h2><p><span id="translation">dog</span></p> 
     <h2>Context:</h2><p><span id="context">I have got a dog.</span></p> 
    </div>  
</div> 

Answer 1

Dies liegt daran, die Höhe des <p> Tag auf ihren Inhalt ändert sich entsprechend.

Der Fix ist eine feste height zu verwenden.

Hinweis: Ab Ajax-Anfrage ist die Länge Ihres Inhalts möglicherweise nicht konsistent. So sollten Sie einen höchsten Wert wählen für height

Answer 2

Was passiert, ist, dass Ihre #translation Spannweite eine Höhe von 18px hat jedoch die ajax-loader.gif eine Höhe von 16px hat verursacht den Sprung, Spannweiten und p Inline-Elemente und ausdehnen und zusammenziehen, je nach die Informationen, die in ihnen ist

<div id="translation" style="height: 18px;">hello</div> 

oder

<span id="translation" style="display:block;height: 18px;">hello</span> 

sollte es tun.