Precharger des images + barre de progression(progress bar)

Soyez le premier à donner votre avis sur cette source.

Vue 29 726 fois - Téléchargée 2 425 fois

Description

C'est un script qui vous permet de précharger vos images avant d'aller à la page principale.

Source / Exemple :


<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> &nbsp;</small></p>')
</script>
</center>
</body>
</html>

Conclusion :


Merci de m'aviser s'il y a des bugs,

bob3000
http://www.netdude.tk

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
vendredi 21 octobre 2011
Statut
Membre
Dernière intervention
21 octobre 2011

désolé mais ton truc ne marche pas !
Messages postés
1
Date d'inscription
vendredi 30 juin 2006
Statut
Membre
Dernière intervention
30 juin 2006

Félicitation, très bon script, je l'utilisé il ya deja quelque temps. A l'époque je l'avais utilisé sans comprendre le code puisque je ne connaissé pas encore le javascript ;)
Aujourd'hui je veux créer le mien et je pense m'inspirer de ce script.
Mais je ne sais pas très bien à qui adresser mes félicitations et mes questions si j'en es. En effet à l'époque j'avais trouvé le script sur dynamicdrive à l'adresse suivante : http://www.dynamicdrive.com/dynamicindex4/preloadimage.htm avec exactement le même à quelques differences pres dont celle ci : "Preload Image With Update Bar Script (By Marcin Wojtowicz [one_spook@hotmail.com])"

L'un des deux à copiés le code de l'autre sans rien modifier, je trouve cela assez navrant.
Excuse moi s'il s'agit d'une erreure de ma part.
Messages postés
2
Date d'inscription
samedi 8 avril 2006
Statut
Membre
Dernière intervention
15 juin 2006

Merci beaucoup westernz, je n'ai pas repondu plus tôt, car depuis tes messages, j'étais sur le problème, alors en fait c'était bien ta seconde idée, il y avait une erreur de majuscule sur l'extension qui devait faire mouliner que IE, qui d'ailleurs n'arrete pas d eplanter sur mon ordi. Une fois ce problème vite résolu, je ne comprenais toujours pas, car ca marchait parfaitement sous IE pour tout le monde mais toujours pas avec mon IE. A force de m'arracher les cheveux, j'ai réinstallé IE et ca marche.... bizarre (faut dire que j'utilise tres peu IE juste pour faire des verifs pour les MAJ de mon site). Voilà je vais régulièrement sur ce site, j'apprend de jour en jour graces aux sources et aux forums, mais je n'avais pas encore osé poser de question. Merci de m'avoir répondu si rapidement.
Messages postés
33
Date d'inscription
mardi 15 novembre 2005
Statut
Membre
Dernière intervention
31 mars 2006

ou alors c'est que l'une des image ne porte pas le bon nom ou extention.
verifi bien que toutes tes images soient effictivement uploadées sous le meme nom avec la meme extention.
Idem pour les virgules, et "", et pas de virgule au dernier fichier.

Pour mieux voir agence ton code ainsi,
(
"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
")
Messages postés
33
Date d'inscription
mardi 15 novembre 2005
Statut
Membre
Dernière intervention
31 mars 2006

J'ai aucun probleme sous ie, sauf 2% du temps ou l'affichage est un peu lent.
A mon avis tu n'a revu qu'une moitier du code du coup le chargement/progression est geré sur la taille d'origine, avec un affichage de la taille totale sur une nouvelle taille plus longue. C'est a mon avis là ton erreur.
Bonne journée
Afficher les 20 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.