Afficher une images d'attente

David -  
magicshark Messages postés 402 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

j aimerais bien aficher une images en attendant le chargement complet de ma page.

dans mon système il y a 3 pages qui interviennent :

1- page principale index.php: qui affiche le résultat à l utilisateur
2- Pages de traitement traitement.php : qui fait et organise l'affichage du résultat
3- fichier javaScripte qui lance la recherche suite à un clic d'un bouton à la page principale.

voila mon code javaScripte :

function recherche()
{
ext= document.getElementById.......value;
dom= document.getElementById......value;
domaine=dom+ext;


if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("domaine").innerHTML=xmlhttp.responseText;
}
}

xmlhttp.open("GET","traitement.php?domaine="+domaine+"&&dom="+dom,true);
xmlhttp.send();
}

==> Suite à des connextion lourd , ma page principale prend du temps pour s'afficher , et j aimerais bien mettre une images GIF pour faire patienter mes visiteurs pendant le chargement de la pages principale.


2 réponses

magicshark Messages postés 402 Date d'inscription   Statut Membre Dernière intervention   13
 
(perso je pense que ça marche par contre c'est du jquery)
xHTML
<div class="wait" style="display:none;z-index:1000;width:100%;height:100%;background-color:white;">
    <img src="image/wait.gif" alt="veuillez patienter" />
</div>
<sript type="text/javascript">$(" .wait ").css("display","bloc");</script>
<!-- tout le reste du code-->

<sript type="text/javascript">
$(document).ready(function(){
   $(" .wait ").css("display","none");
});
</script>


pas tester mais pourquoi ça ne marcherai pas ??
0
Soulitude Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   7
 
@ magicshark: peut être parce que la balise "sript" n'existe pas ^^'

En tout cas t'as juste à faire une div ou tu place une image de chargement ou un gif.

Genre :
<div id="loading"><img src="img/loading.gif" /></div> 


Tu rajoutes un truc comme ça en css pour agrémenter un peu le truc:

#loading { 
position:absolute; 
display:none; 
top:25%; 
width:50%; 
left:25%;  
z-index:-1; 
} 


et dans ta fonction recherche() tu ajoutes ces lignes:

var load = document.getElementById('loading'); 
load.style.display="block"; 
load.style.zIndex="999";
0
magicshark Messages postés 402 Date d'inscription   Statut Membre Dernière intervention   13
 
mouahaha tout ça pour une faute de frappe :D
en tout cas j'approuve ta methode Soulitude :P vu que c'est la même
0
Soulitude Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   7
 
Héhé
Oui, mais vu sa requête Ajax, je ne pense qu'il utilise jQuery.
0
magicshark Messages postés 402 Date d'inscription   Statut Membre Dernière intervention   13
 
oui oui mais j'y connais rien en js j'suis plus jquery donc après ce qui me rassure c'est que mon principe etait le bon :D
merci pour lui pour la traduction js muhahaha
0