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.
Merci de m'aviser s'il y a des bugs,
bob3000
http://www.netdude.tk
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> </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
- Barre de progression gif
- Gif barre de chargement - Meilleures réponses
- Barre de chargement gif - Meilleures réponses
- Javascript : Prechargement d'image(s), avec barre de progression ( différente version ) - Guide
- Barre de progression améliorée (images) - Codes sources - Visual Basic / VB.NET (Graphique)
- Delphi / Pascal : Progress bar image/3d/dégradée/simple - CodeS SourceS - Guide
- PHP : Générer une progressbar (barre de progression) en format image - CodeS SourceS - Guide
- Barre de progression php - Guide
Commentaires
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.
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
")
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
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.