Comment mettre une barre de téléchargement sur votre site Internet ?

 

par meltech1 |

     
Comment mettre une barre de téléchargement sur votre site Internet ?

On a vu dans un autre article qu'il est possible d'indiquer à l'internaute le temps de chargement d'une page Internet. Pour le faire patienter on peut aussi ajouter ce que l'on appelle une barre de téléchargement. C'est une barre qui s'affche et fait patienter l'internaute le temps que vous voulez. Voici comment le programmer.

Quelles sont les fournitures nécessaires ?

  • Internet Explorer
  • Logiciel Bloc Notes
  • Une image de barre

Étapes de réalisation

1.

Commencez par ouvrir votre page Internet pour en obtenir le code source avec le logiciel Bloc Notes. C'est le programme de votre site Internet qui contient les balises de programmation. Il y a parmi ces balises la balise <head>. Veuillez donc trouver cette balise <head>.

2.

Dans la balise <head> veuillez insérer le script suivant :
<script language="JavaScript">
var ima1 = "image.jpg";
var fond = "#000000";
var couleur = "#FFFFFF";
var scale = 3
var tps = 5
</script>

Notez ici que la barre c'est l'image.jpg.

3.

Maintenant veuillez insérer dans la balise <body> le script suivant :
<script language="JavaScript">
var largeur = screen.width;
var haut = ((screen.height/2)+80)/30;
document.write('<div id="hidepage" style="position: absolute; left:0px; top:0px; background-color: '+ couleur +'; layer-background-color: '+couleur+'; height: 100%; width: '+largeur+';"> ');
</script>
<script language="JavaScript">
var tps_inter = tps * 10;
var ima2 = "";
var imgsbefore = 0
function pcgbar(pcg) {
var totalbe = imgsbefore + 100
if (pcg < totalbe) {
document.images[pcg].src = ima1;
newpcg = pcg + 1
timerID=setTimeout('pcgbar(newpcg);',tps_inter);
}
else if (pcg == totalbe) {
if (document.getElementById) { // IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hidepage.visibility = 'hidden';
}
else { // IE 4
document.all.hidepage.style.visibility = 'hidden';
}
}
}
}
if (document.images) {
for (i=0;i<haut;i++){
document.write("<br>");
}
document.write ('<center><font face="arial" color="" size="2"><b>Veuillez patientez, chargement de la page...</b><font><br><br><table border=1 cellspacing=0 cellpadding=0 bordercolor="#000000" bgcolor="'+fond+'"><tr><td>');
for (var i = 0; i < 100; i++) {
var width= 1 * scale
var imgna = new Image()
imgna.src = ima2;
document.write ('<img border=0 src=ima2; width="' + width + '" height="20">');
}
document.write ('</td></tr></table></center>');
var startpnt = imgsbefore
pcgbar(imgsbefore);
}
</script>
</div>

4.

Pour terminer enregistrez le tout avec Bloc Notes et ouvrez avec IE. Maintenant votre Internaute peut patienter avec une barre de téléchargement qui lui indique que le site Internet est en train de se télécharger.

Astuces et mises en garde

Astuce(s) :

Pour modifier le texte d'attente allez dans la balise <body>.

Commentaires

ercan67000 | 27/05/2011  

Bonjour, est-ce normal que la barre de chargement ne bouge pas ? Merci

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on