Bonjour, bonjour !
Premier message, premier appel au secours
Alors pour résumer, je voudrais mettre une ProgressBar qui charge mes images avant que le contenu de mon site ne s'affiche (la page d'avant sera obligatoirement une page de mon site). Bon jusque là, aucun problème, j'ai trouvé ce script : http://www.javascriptfr.com/code.aspx?ID=16334
Nickel c'est fait pour moi.
Mais le problème, c'est que je voudrais que cette ProgreeBar soit un minimum esthétique... et dans ce script, c'est du très très simple...
Alors je pense que sa se passe côté CSS tout ça, mais ne connaissant absolument pas le JavaScript (non ne me tapez pas !) je sais pas ou placer mes divs...
donc en gros je voudrais que cette image se place au dessus de la ProgressBar :
et qu'en dessous soit placé la ProgressBar avec les codes héxadécimaux suivants :
#008acb pour la partie chargée
#a29d9a pour la partie en attente de chargement
(bon pour ça j'accepte la concession avec les gifs qu'utilise le script, en moins lourd parcontre... 800Ko c'est énorme !)
Donc ou placer mon image (ou une div la contenant, le CSS c'est pas un problème) dans ce code ?
Pour rappel le code est le suivant :
Code Javascript :
<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="javascript:window.location=locationAfterPreload">Annuler</a> </small></p>')
</script>
</center>
</body>
</html> Merci à vous !