Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

PRECHARGER DES IMAGES + BARRE DE PROGRESSION(PROGRESS BAR)


Information sur la source

Catégorie :Graphique Niveau : Débutant Date de création : 30/07/2003 Date de mise à jour : 06/11/2003 05:35:24 Vu / téléchargé: 20 035 / 1 937

Note :
8,67 / 10 - par 3 personnes
8,67 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (19)
Ajouter un commentaire et/ou une note


Description

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

Source

  • <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>
<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
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de Frank339 le 04/11/2003 20:39:45

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 à un administrateur
Commentaire de bob3000 le 06/11/2003 05:36:14

ok, c'est fait :)

signaler à un administrateur
Commentaire de XSimpson le 07/01/2004 16:02:49

J'aimerai savoir si le script fonctionne que sur IE ou sur Netscape aussi ??

signaler à un administrateur
Commentaire de wpink le 23/06/2004 14:27:11

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 à un administrateur
Commentaire de durss le 20/11/2004 23:30:17

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!!!

signaler à un administrateur
Commentaire de cpasfaire le 28/02/2005 16:29:04

Trés beau travail,

dommage que le lien "annuler" n'apparait  sous firefox

signaler à un administrateur
Commentaire de cpasfaire le 28/02/2005 17:14:17

euhh ça marche trés bien sous firefox en fait ....

par contre ça se bloque sous IE (environ à 80%), il faut que je fasse annuler sinon ça bouge plus ...

signaler à un administrateur
Commentaire de eugene16 le 01/06/2005 13:42:10

oui sa bloc sous IE.. comment oon fait?

signaler à un administrateur
Commentaire de Amnesiks le 28/06/2005 10:32:50


1.6 Ko pour deux images de seulement 1 pixel...
Y'a pas comme un truc qui cloche ??

Il serait quand meme plus judicieux de :

- soit mettre une image de meme poids mais qui serait un peu plus élaborée.
(avec 800 octets on peut faire bien mieux qu'une petite image monochrome)

- soit réduire le nombre de couleurs, et on obtient 34 octets pour noir.gif (2 couleur) et 77 octets pour blue.gif (16 couleurs)
ce qui divise la taile totale des images par 15.

signaler à un administrateur
Commentaire de Zefranz le 02/10/2005 02:06:18

Pour le blocage sous IE, c'est probablement qu'il ne trouve pas certaines images, et cesse alors de précharger : vérifiez dans la ligne 11 que les noms des images sont tous corrects, y compris les majuscules.

signaler à un administrateur
Commentaire de westernz le 20/11/2005 01:42:55

Bonjour,

Bon script que j'utilise, toutefois existe il un moyen pour eviter les splash screen qui se produise quand on clic une 2eme fois sur le lien qui amenne a la page de chargement.

Je m'explique.
J'ai un lien qui appel ce script, celui ci ammene donc a ma page de destination.
Si l'internaute navigue et revient sur la page, le chargement se fait quasi instantanement, et le peu de tmps que reste la page de chargement fait un effet splash screen assez genant.

Est il possible de dire au lien qui amenne a la page de chargement d'aller directement au lien de destination (que je lui definit) sans passer par la page de chargement, cela a la condition unique que la page de chargement est deja été chargée. ?

Merci
Bonne journée
Westernz

signaler à un administrateur
Commentaire de bastien62 le 16/02/2006 02:38:12

IMPEC. c'est que je chercher!!
1_est-ce que le prechargement peut etre appliquer à un fichier .swf ( voir plusieurs)?
Ce serait formidable!!
au cas ou je vais essayer en nettoyant le cache et ne mettant qu'un .swf (à la place du .gif)
2_existerait - il un probleme avec ce script; si sur mon site c'est ".GIF"(Masjuscule)
à la place de ".gif" ou inversement?
3_Enfin, au lieu du changement de page (la consequence final), peut on faire à apparaitre un bouton (en .gif ou en .swf)à 2 coordonnées precisses ou centré...etc ???
(celui-ci etant le lien vers la page suivante)
Merci pour un pov gars + infographiste que programmateur !!!!     ;)

signaler à un administrateur
Commentaire de durss le 03/03/2006 14:37:26

tu ferais mieux de mettre le chargement des swf directement dans eux même ou de faire un swf qui se charge de charger ceux dont tu as besoin. Un flash qui charge tous les autres c'est vraiment pas lourd donc pas besoin de te faire ch** avec du javascript pour le charger... sinon oui oui tu peux faire afficher un bouton une fois le chargement terminé mais la flemme de dire ^^. en gros tu donne un id à ton bouton tu lui mets ça dessus style="display:none" pour le cacher et pour le faire apparaitre tu fais document.getElementById('l_identifiant_que_t_as_donné_au_bouton').style.display = 'inline';

bon courage

signaler à un administrateur
Commentaire de westernz le 03/03/2006 18:42:14

Bonjour,

Pour mon message precedent sur "ne pas recharger quand c'est deja fait", ou tout autre chose qui donne le meme resultat visuel.
Je suis toujours preneur, meme si tu m'indique juste ce qu'il faudrai faire.
Je suis pas super doué mais ma soeur maitrise les codes mieu que moi, elle pourrai me le faire si elle a une marche a suivre.

Bonne journée.

signaler à un administrateur
Commentaire de nifheim le 15/06/2006 15:29:37

Bonjour ce code est excellent!!, cependant alors que la progression de la barre est parfaite sous netscape, firefox et safari, sous IE, la barre de progression n'apparait pas pendant la quasi totalité du chargement et n'atteint que 20% de sa taille en moyenne lorsque la totalité  des images ont été chargées... est ce normal ou ai je fais une erreur? pourtant j'ai repris l'intégralité du code en personnalisant seulement la barre de progression (en changeant la taille et la couleur). Merci pour ta source et j'espère qu'il y a 1 solution mon problème.
Bonne journée  

signaler à un administrateur
Commentaire de westernz le 15/06/2006 16:17:04

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

signaler à un administrateur
Commentaire de westernz le 15/06/2006 16:24:28

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
")  

signaler à un administrateur
Commentaire de nifheim le 15/06/2006 20:14:00

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.

signaler à un administrateur
Commentaire de utsuho le 30/06/2006 17:49:20

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.

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Octobre 2008
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,172 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.