ajax chargement image

Question

J'ai une page qui vérifie un formulaire pour la validation, les contrôles principaux sont pour si l'email ou le nom d'utilisateur est déjà dans la base de données. J'ai ce travail bien, mais je ne peux pas comprendre comment ajouter une image de chargement ... pour quand l'utilisateur change le nom d'utilisateur ou l'email quand il est vérifié.

fonction yy pour vérifier le nom d'utilisateur est ci-dessous, son similaire pour le courrier électronique de vérification

function check_username(username) 
{ 
var httpRequest; 
make_request() 
function stateck() 
    { 

    if(httpxml.readyState==4) 

     { 
     if (httpxml.responseText.indexOf ("Username Ok") >= 0) 
     { 
      document.getElementById("username").style.backgroundColor = "green"; 
      document.getElementById("username").style.color = "white"; 
      document.getElementById("username_div").style.display = 'none'; 
      usernameok = true; 

     } 

     else 
     { 
      document.getElementById("username").style.backgroundColor = "red"; 
      document.getElementById("username_div").style.visibility = 'visible'; 
      document.getElementById("username_div").innerHTML=httpxml.responseText; 
      usernameok = false; 

     } 
     checkCanSubmit();   
     } 


    } 

httpxml.onreadystatechange=stateck; 
user_url="check_username.php?username=" + username.value; 
httpxml.open("GET",user_url,true); 
httpxml.send(null); 
} 

J'ai déjà essayé bibliothèque jQuery, et je préfère cette façon.

Answer 1

ajaxload.info fonctionne en effet bien, mais vous n'avez pas besoin de vous embêter avec une image div et background. Il suffit de créer un <img>, en utilisant document.createElement, puis réglez le src de l'image, puis l'ajouter à votre document:

var img = document.createElement('img'); 
img.src = '<the URL of your loading image>'; 
function stateck() { 
    ... 

Maintenant, vous pouvez insérer le nouveau img dans votre document, puis retirez-le en stateck ().