1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Graphique
  5. Precharger des images + barre de progression(progress bar)

Precharger des images + barre de progression(progress bar)

Soyez le premier à donner votre avis sur cette source.

Vue 30 207 fois - Téléchargée 2 458 fois

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
MoonRaptorZ Messages postés 2 Date d'inscription vendredi 21 octobre 2011 Statut Membre Dernière intervention 21 octobre 2011
3 déc. 2011 à 20:02
désolé mais ton truc ne marche pas !
utsuho Messages postés 1 Date d'inscription vendredi 30 juin 2006 Statut Membre Dernière intervention 30 juin 2006
30 juin 2006 à 17:49
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.
nifheim Messages postés 2 Date d'inscription samedi 8 avril 2006 Statut Membre Dernière intervention 15 juin 2006
15 juin 2006 à 20:14
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.
cs_westernz Messages postés 33 Date d'inscription mardi 15 novembre 2005 Statut Membre Dernière intervention 31 mars 2006
15 juin 2006 à 16:24
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
")
cs_westernz Messages postés 33 Date d'inscription mardi 15 novembre 2005 Statut Membre Dernière intervention 31 mars 2006
15 juin 2006 à 16:17
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
S'inscrire maintenant

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.

Du même auteur (bob3000)