Améliorer un code trouvé sur ce site

Signaler
Messages postés
7
Date d'inscription
mardi 15 janvier 2008
Statut
Membre
Dernière intervention
3 juillet 2008
-
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
-
Bonjour,
je suis nouveau sur le forum et complètement novice en javascript. Moi je suis plus php.
Cependant j'ai trouvé un code pour mon site qui permet de précharger des images. Voici ce que ca donne: http://www.plevenon-meteo.info/webcam.php?time=0.1&frame=1&precharger=1&#barre
Attendez le chargement complet avant de démarrer le diaporama, l'effet est grantie !
Je voudrais ajouter une fonction qui afficherait a côté de la barre le poucentage du chargement (0%...40%...100%).
Mais malgré mais tentative je n'y arrive pas. Quelqu'un n'aurait pas une idée ?

Voici le code :
<html>
<head>
<title>Préchargement des images...</title>
<script language="JavaScript">
// modifier ce qui suit
 var locationAfterPreload = "http://www.codes-sources.com" // l'addresse de la page après que le préchargement fini
 var lengthOfPreloadBar = 150 // Longueur de la barre de progression en pixels
 var heightOfPreloadBar = 15 // Hauteur de la barre de progression en pixels
 // les images a precharger(mettez-en autant que vous voulez)
 var yourImages = new Array("http://www.bla.com/test2.gif","http://www.bla.com/test3.gif","http://www.bla.com/test4.gif","http://www.bla.com/test5.gif' target='_blank'>http://www.bla.com/test1.gif","http://www.bla.com/test2.gif","http://www.bla.com/test3.gif","http://www.bla.com/test4.gif","http://www.bla.com/test5.gif")
if (document.images) {
 var dots = new Array()
 dots[0] = new Image(1,1)
 dots[0].src = "black.gif" // couleur de la barre en default
 dots[1] = new Image(1,1)
 dots[1].src = "blue.gif" // couleur de la barre en progression var preImages new Array(),coverage Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
 var loaded = new Array(),i,covered,timerID
 var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
 for (i = 0; i < yourImages.length; i++) {
  preImages[i] = new Image()
  preImages[i].src = yourImages[i]
 }
 for (i = 0; i < preImages.length; i++) {
  loaded[i] = false
 }
 checkLoad()
}
function checkLoad() {
 if (currCount == preImages.length) {
  location.replace(locationAfterPreload)
  return
 }
 for (i = 0; i <= preImages.length; i++) {
  if (loaded[i] == false && preImages[i].complete) {
   loaded[i] = true
   eval("document.img" + currCount + ".src=dots[1].src")
   currCount++
  }
 }
 timerID = setTimeout("checkLoad()",10)
}
</script>
</head>

<center>
Préchargement des images...

0%
<script language="JavaScript">
// il est fortement recommande de garder le lien 'annuler' au cas ou l'utilisateur, pour une raison ou pour une autre, ne peux pas voir les images(navigateur)
if (document.images) {
 var preloadBar = ''
 for (i = 0; i < yourImages.length-1; i++) {
  preloadBar += ''
 }
 preloadBar += ''
 document.write(preloadBar)
 loadImages()
}
document.write('<small>[javascript:window.location=locationAfterPreload Annuler] &nbsp;</small>

')
</script>
</center>

</html>

Merci d'avance !

8 réponses

Messages postés
7
Date d'inscription
mardi 15 janvier 2008
Statut
Membre
Dernière intervention
3 juillet 2008

Pardon j'ai du me trompé de catégorie.
Désolé
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
bonjour,

la catégorie n'est pas grave si on cause javascript en fait...
un préchargement ? c'est généralement totalement inutile voire nuisible !

>>Attendez le chargement complet avant de démarrer le diaporama, l'effet est grantie !
ben justement ! qui va attendre devant une page blanche ( ou un message du style
"chargement en cours" ) pendantje ne sais combien de temps ?
pour moi tu ferais mieux de supprimer ce préchargement.

préchargement =  chargement de toutes les images, même celles
qu'on ne visionnera jamais  + temps d'affichage en réel pour chaque après
mais page blanche pendant tout ce temsp

pas de préchargement: temps d'affichage de la 1ère image et c'est tout
puis aprés pour chaque nouvelle  image voulue, son temps de chargement
et pour le réaffichage le cache sait faire.

ce n'est que mon avis

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
7
Date d'inscription
mardi 15 janvier 2008
Statut
Membre
Dernière intervention
3 juillet 2008

Bonjour et merci,
Je suppose que vous n'avez pas été voir ma page vu ce que vous me dites là.
En effet, j'y propose 2 modes.
Le premier sans préchargement et le second avec (le liens que j'ai donnée est avec préchargement).
C'est donc l'utilisateur qui choisit s'il veut ou pas le préchargement (désactivé par défault).
Ensuite lors du chargement des images qui prend 30s environ (avec un dowload de 900kbits chez mois) la page n'est pas blanche, elle tout a fait opérationnelle, on peut se servir du diaporama (sauf pour des vitesse élevée où là il faut attendre la fin du préchargement).
Ce préchargement est pour moi très utile car je présente des images du ciel (mon site parle de la météo de ma ville).
Ainsi grace au préchargement, je peux y faire défiler les 144 images qui représente 24h avec une frame de 100ms par image, ce qui fait un petit film de la journée.
Je réitère donc ma demande afin de savoir comment placer un texte a coté de la barre de chargement afin d'afficher le pourcentage en temps réel.
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
126
si je me trompe pas les images sont place dans un tableau tu pourait essayer de gere la fonction dans ce sens

 var le_tableau = new Array(1,2,3,4,5,6,7,8,9);
 alert(le_tableau.length);

cette exemple de donne la taille de ton tableau si a un moment donne tu parcoure le tableau tu connaitra la taille du tableau ou plutot le nombre des image deja precharge si tu a au totale de 50 image a precharge et que le tableau en comporte 20
20/(50/100) te donnera le poucentage de progression  tu pourait affiche dans un champ ce pourcentage.

a voire maintenant en fontion de ton script si c'est possible
Messages postés
7
Date d'inscription
mardi 15 janvier 2008
Statut
Membre
Dernière intervention
3 juillet 2008

J'y ai pensé, ou encore plus simple, il y a des boucles for dans le script, je peux utiliser le i de la boucle pour afficher ce pourcentage. Mais c'est comment l'afficher ? Par quelle fonction, j'avais placé un i déjà dans une boucle mais ca m'affichait une série de chiffre à la suite, et non un chiffre qui s'efface pour ensuite afficher la nouvelle valeur de i.
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
126
ei si tu declare un variable globale tu assigne la valeur du i a cette varible ce qui fait que la valeur du i peut etre lu par une autre fonction . pour eviter des changement de la valeur trop rapide a lire la fonction sera execute selon un certain interval (setTimeout) et aussi  arondi  la valeur ( ex : 15.22457894452 arondi a 15).
a tester
Messages postés
7
Date d'inscription
mardi 15 janvier 2008
Statut
Membre
Dernière intervention
3 juillet 2008

Bon bah c'est bon j'ai réussi tout seul, après pas mal de recherche. Merci a kazma de m'avoir aider.
La solution je l'ai trouvé dans un script d'affichage de l'heure en temps réel. Je m'en suis servi pour afficher la poucentage ainsi que le nombre d'image downloadé.
Résultat ici : http://www.plevenon-meteo.info/webcam.php?time=0.1&frame=1&precharger=1&#barre
A+
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
126
nikel chrome