Precharger des images + barre de progression(progress bar)

Soyez le premier à donner votre avis sur cette source.

Vue 29 624 fois - Téléchargée 2 400 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

Signaler
Frank339
Messages postés
164
Date d'inscription
mardi 18 décembre 2001
Statut
Membre
Dernière intervention
19 décembre 2008
 -
Personnellement, je n'ai pas encore testé ton programme, malgrais que l'intro soit très allechante... mais j'aurai pensé que tu aurais ou moin mis un zip avec les images de ton pourcentage... :-(
Signaler
bob3000
Messages postés
406
Date d'inscription
mardi 7 mai 2002
Statut
Membre
Dernière intervention
2 octobre 2004
 -
ok, c'est fait :)
Signaler
XSimpson
Messages postés
31
Date d'inscription
mercredi 23 avril 2003
Statut
Membre
Dernière intervention
7 octobre 2004
 -
J'aimerai savoir si le script fonctionne que sur IE ou sur Netscape aussi ??
Signaler
wpink
Messages postés
1
Date d'inscription
mercredi 23 juin 2004
Statut
Membre
Dernière intervention
23 juin 2004
 -
j'aimerais savoir, si c'est possible, comment précharger en même temps les sons???
(Chui pas une bête de prog...) MERCIIII :-)
Signaler
durss
Messages postés
5
Date d'inscription
samedi 28 juin 2003
Statut
Membre
Dernière intervention
23 novembre 2003
 -
Vraiment sympa le script!! bravo!!

Pour ce qui est de la compatibilité netscape j'ai l'impression que ça fonctionne..

efnin perso ces histoires de compatibilité commencent à réellement me prendre la tête!!!
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)