Afficher une images d'attente
David
-
magicshark Messages postés 445 Statut Membre -
magicshark Messages postés 445 Statut Membre -
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.
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
-
(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 ?? -
@ 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";
