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.
A voir également:
- Afficher une images d'attente
- Des images - Guide
- Afficher taille dossier windows - Guide
- Windows 11 afficher d'autres options - Guide
- Commande en attente d'acceptation fnac ✓ - Forum Consommation & Internet
- Légender une image - Guide
2 réponses
(perso je pense que ça marche par contre c'est du jquery)
pas tester mais pourquoi ça ne marcherai pas ??
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 :
Tu rajoutes un truc comme ça en css pour agrémenter un peu le truc:
et dans ta fonction recherche() tu ajoutes ces lignes:
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";