Precharger des images + barre de progression(progress bar)
Soyez le premier à donner votre avis sur cette source.
Vue 29 867 fois - Téléchargée 2 426 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
- Gif barre de chargement
- Barre de chargement gif - Meilleures réponses
- Barre de progression gif - Meilleures réponses
- Barre de chargement avant affichage de votre page web - Guide
- Créer rapidement et facilement un petit diaporama d'images externes (avec barre de chargement) - Conseils pratiques - Flash
- Visual Basic / VB.NET : Angel-2 (naviguateur internet) avec barre de chargement - CodeS SourceS - Guide
- Barre de chargement en flash mx (version très simple...) - Codes sources - Flash (ActionScripts)
- Javascript : Barre de chargement avec un effet surprise (pas beaucoup de différence avec les - Guide
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.