Precharger des images + barre de progression(progress bar)

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

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)