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:
[ Lien ]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/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>
<body>
<center>
<font size="4">Préchargement des images...<br>
</font><p>
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 += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
}
preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
document.write(preloadBar)
loadImages()
}
document.write('<p><small><a href="window.location=locationAfterPreload">Annuler</a> </small></p>')
</script>
</center>
</body>
</html>
Merci d'avance !