Accueil > > > PRECHARGER DES IMAGES + BARRE DE PROGRESSION(PROGRESS BAR)
PRECHARGER DES IMAGES + BARRE DE PROGRESSION(PROGRESS BAR)
Information sur la source
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> </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> </small></p>')
</script>
</center>
</body>
</html>
Conclusion
Merci de m'aviser s'il y a des bugs,
bob3000 http://www.netdude.tk
Sources du même auteur
Sources de la même categorie
Commentaires et avis
|
Derniers Blogs
COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE?COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL
Avec EF, les vues doivent être mappées sur des entity types. Le problème c'est que les entity types doivent avoir une clé. Avec EF, nous avons les complex type qui n'ont pas de clé mais les vues ne peuvent pas être mappées dessus. Avec EF4, il est possibl...
Cliquez pour lire la suite de l'article par Matthieu MEZIL [WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL?[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson
Certain d'entre vous on peut être vécu cette situation embarrassante après quelques temps passer avec WF4 : Au début avec mon " ActivityDesigner" , tout allait bien. Et puis un jour j'ai au des problèmes de " Binding" . Alors nous sommes allé sur le site ...
Cliquez pour lire la suite de l'article par JeremyJeanson MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ?MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ? par junarnoalg
La prochaine session de MyTIC aura lieu à Namur, le 23 mars prochain. Pendant presque une heure, nous parlerons de SharePoint 2010. Voici un aperçu du programme.
Accueil : 17h30 Début de la session : 18h00 - Les nouvelles int...
Cliquez pour lire la suite de l'article par junarnoalg
Logiciels
Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|