PRELOAD D'UNE PAGE AVEC BARRE DE PROGRESSION
granduc
Messages postés
2
Date d'inscription
mardi 18 décembre 2001
Statut
Membre
Dernière intervention
28 octobre 2003
-
28 oct. 2003 à 12:08
camyphil Messages postés 1 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 16 juin 2009 - 16 juin 2009 à 10:09
camyphil Messages postés 1 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 16 juin 2009 - 16 juin 2009 à 10:09
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/17161-preload-d-une-page-avec-barre-de-progression
https://codes-sources.commentcamarche.net/source/17161-preload-d-une-page-avec-barre-de-progression
16 juin 2009 à 10:09
20 mars 2009 à 23:09
Juste une légère correction pour améliorer la mise en page...
Tu as écris <TD align=middle bgColor=#ffffff>
A remplacer par <TD valign=middle align=center bgColor=#ffffff>
11 nov. 2008 à 11:49
c'est un tres bonne code BRAVO :)
j'essaie maintenant de le modifie pour le rendre progresse bar :
function preloadImage(i,j){...}
function balbla()
{
for(var i=0;i<1000;i++)
{
preloadImage(i,1000);
....
}
}
=>le i n'incrémente pas dans le fonction preloadImage et elle n'est plus un variable globale,
aussi setTimeout(preloadImage) devient plus utile
je pense que se doit marche mais j'ai pas encore teste
merci ton code est bien commente
13 mai 2008 à 23:10
bon moi je vous previens je suis un vrai débutant ...
j'ai creé une page free avec une image et un lien vers mon vrai site .
le probleme c'est que cette image met disons 15-30sec a s'afficher ... donc j'aurais aimer mettre ce script avant cette page...
j'utilise free.fr et je sais pas comment mettre de script dans free... je sais juste inserer des pages word ou autre =s
donc si vous pouviez me dire comment mettre cette super barre de progresion sur un fond noir (de preference) avant ma page d'acceuil je serai comblé :)
mon site pour vous rendre compte : http://lavancelle.free.fr
merci d'avance !
28 avril 2008 à 03:32
le problème était que le dossier "Preload" contenant les images de progressbar n'était pas dans le serveur.
Surement un oubli de ma part
mais bon confirmation,ca marche dans multimania
encore merci et bravo pour le script,dommage qu'on peut pas voter 2 fois !
fadelovesky
28 avril 2008 à 03:27
je viens de decouvrir ton code,bravo je met un 10
j'ai réussi à l'integrer dans mon site(www.fadelarchi.c.la) , ca marche nikel en local
Mais,Mais,.....Ce dernier ne marche pas (sauf erreur de ma part) dans les site hébergé dans multimania,car elle ajoute des scripts au début !!
pouvez vous m'aider?
cordiallemeny,fadelovesky
Qualification(webmaster Initié)
14 sept. 2005 à 12:39
frank123>> finalement! ta bidouille elle marche?:
larsen44>> QQ1 a testé son code?
17 août 2005 à 17:26
je suis a la recherche d'un script de chargement pour un VRML (integré dans une page html). Je trouve des scripts de preload mais seulement pour des images ou des pages html. Auriez vous une astuce pour charger ce fichier (wrl)
Merci d'avance
vans
12 avril 2005 à 00:45
Désolé pour l'encombrement, la solution à mon problème est que pour le moment, Mozilla Firefox (1.0.2) fait planter l'affichage !
Ça marche nickel avec IE de Microsoft.
Ce que j'en retiens : Si ça marche en local (preview Golive par ex.) mais plus en ligne, il faut tester tout de suite avec un autre Browser !!!
7 avril 2005 à 17:31
J'ai beau essayer de copier/coller le code en respectant les emplacements mais rien à faire, ça ne marche ni en local, ni en réseau :\
Tout du moins, j'ai réussi une fois à avoir quelque chose qui semblait marcher en local, et encore, je ne suis pas sûr qu'il préchargeait vraiment les images.
De plus, dans mon code initial, Golive m'inscrit déjà des "preload" un peu de partout (j'utilise bcp de roll over) alors je me demande si tout ça ne rentre pas en conflit quelque part ? Ou tout simplement, ce "preload de page" est-il compatible avec Golive CS ?
Pour finir je ne voudrais pas abuser, mais est-ce que quelqu'un saurait me placer (aux bons endroits) le code dans ma page ? J'abuse un peu c'est clair...
J'ai tout essayé et depuis une semaine je tourne en rond !!! Alors ça serait sympa de me montrer où est-ce que le code se place, ça me donnerai un exemple concrêt pour les autres pages.
Pour vous faire une idée plus précise de mon site :
http://nicolas.davidcavaz.free.fr
Par avance un grand merci !!!
Mon code de page initiale (sous Golive CS) :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>NDC - Accueil</title>
<meta name="keywords" content="Audiovisuelle, Réalisateur, réalisation, caméraman, cameraman, corporatif">
<csscriptdict import>
<script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script>
</csscriptdict>
<csactiondict>
<script type="text/javascript"><!--
var preloadFlag = true;
function preloadImages() {
if (document.images) {
pre_Services_20__20Roll_20over = newImage('Liens%20Menu/Exp%e9rience%20-%20Roll%20over.gif');
pre_Tarifs_20__20Roll_20over = newImage('Liens%20Menu/Tarifs%20-%20Roll%20over.gif');
pre_Travaux_20__20Roll_20over = newImage('Liens%20Menu/R%e9alisations%20-%20Roll%20over.gif');
pre_Parcours_20__20Roll_20over = newImage('Liens%20Menu/Parcours%20-%20Roll%20over.gif');
pre_Contact_20__20Roll_20over = newImage('Liens%20Menu/Contact%20-%20Roll%20over.gif');
pre_Nico_20__20Roll_20over = newImage('Liens%20Menu/Nico%20-%20Roll%20over.gif');
preloadFlag = true;
}
}
// --></script>
</csactiondict>
<table width="770" border="0" cellspacing="0" cellpadding="0" background="%c9l%e9ments%20partag%e9s/Fond%20de%20page.jpg" cool gridx="16" gridy="16" height="530">
----, </td>
,
,
,
,
,
<spacer type="block" width="1" height="21">,
----
,
<spacer type="block" width="1" height="46">,
----
,
,
<spacer type="block" width="1" height="3">,
----
,
<spacer type="block" width="1" height="21">,
----
,
<spacer type="block" width="1" height="9">,
----
,
<spacer type="block" width="1" height="12">,
----
,
<spacer type="block" width="1" height="42">,
----
,
<spacer type="block" width="1" height="21">,
----
,
,
<spacer type="block" width="1" height="21">,
----
,
,
<spacer type="block" width="1" height="42">,
----
,
,
,
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="200" width="466">
</object>,
<spacer type="block" width="1" height="258">,
----
,
,
<spacer type="block" width="1" height="33">,
----
<spacer type="block" width="7" height="1">,
<spacer type="block" width="3" height="1">,
<spacer type="block" width="3" height="1">,
<spacer type="block" width="71" height="1">,
<spacer type="block" width="47" height="1">,
<spacer type="block" width="142" height="1">,
<spacer type="block" width="5" height="1">,
<spacer type="block" width="21" height="1">,
<spacer type="block" width="470" height="1">
</td>
</tr>
<tr align="center" height="19">
<td height="19"></td>
</tr>
<tr align="center">
<td>© 2005 Nicolas David-Cavaz</td>
</tr>
</table>
</html>
25 févr. 2005 à 10:40
Comment faire pour preloader des images contenu dans un dossier et non les images de la page ?
Est-ce que programme télécharge aussi les images contenu dans les Iframe d'une page ?
20 févr. 2005 à 20:06
10 févr. 2005 à 08:54
<html>
<head>
<title>Accueil</title>
<script language="JavaScript" type="text/JavaScript">
var ie = document.all?true:false // On test le navigateur pour IE
onload = preloadImage // Appel de la function preloadImage() au chargement de la page. Peut etre remplacer par
function addZero(chiffre){ // Function qui ajoute un zero devant les chiffres
if (chiffre < 10) { chiffre = "0"+chiffre; }
if (chiffre < 100) { chiffre = "0"+chiffre; }
return chiffre;
}
var i=0; // On initialise le comptage des images a 0.
function preloadImage(){
var myContent = document.getElementsByTagName("img") // On repere les images contenu dans la page
var totalImage = myContent.length // Et on compte combien il y'en a
percent = Math.ceil((i+1)*100/totalImage) // A chaque passage dans la fonction, on calcule le pourcentage de i par rapport au nb d'image
if (i < totalImage){ // Si l'image traité n'est pas la derniere image du doc on execute ce qui suit.
if (myContent.item(i).complete) { // si l'image i est chargée, on envoi le pourcentage dans le div
document.getElementById("preloadPercent").innerHTML = "[please wait " + addZero(percent) + "%]";
document.loadedGreen.style.width = percent // Et on redimension l'image rouge
document.loadedRed.style.width = 100-percent // pareil en consequence avec la verte.
i++ // On increment i, pour passer a l'image suivante
setTimeout(preloadImage) // Et hop, on repasse dans la fonction avec l'image suivante
}
} else { // Sinon, on deduit que les images ont toute été chargées, et on cache le preload.
if (!ie) document.getElementById("preloadCache").style.visibility = "hidden"; // Si le client n'est pas IE on vire tout simplement le cache
else crosoftFade() // Sinon on applique un effet de fade progressif en appelant la fonction crosoftFade()
}
}
var opacity = 100 // Opacity de depart
function crosoftFade(){
opacity -= 25; // Opacity -25 a chaque passage
document.getElementById("preloadCache").style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + opacity + ")";
if (opacity > 0) setTimeout(crosoftFade); // On passe cette fonction en boucle tant que le cache n'a pas disparu
else document.getElementById("preloadCache").style.visibility = "hidden";
}
</SCRIPT>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var c,x,a=document.MM_sr; for(c=0;a&&c0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (c=0;!x&&c<d.forms.length;c++) x=d.forms[c][n];
for(c=0;!x&&d.layers&&c<d.layers.length;c++) x=MM_findObj(n,d.layers[c].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var c,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(c=0;c<(a.length-2);c+=3)
if ((x=MM_findObj(a[c]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[c+2];}
}
//-->
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
[please wait 000%]
<TABLE cellSpacing=0 cellPadding=1 width=100 border=0>
----, </TD>
</TD>
</TR>
</TBODY>
</TABLE>
<!-- fin du cache -->
,
----
,
,
,
----
,
----
,
,
,
,
,
,
,
----
,
,
,
----
<table width="800" height="338">
----,
Salut les gens,
</td>
----
heureux de vous parmis la communauté des Djs/Clubbers, au programme plein de bonne choses, allez...!!!
Mes mix datant de Novembre 2004 ( les prochains sont en cours...), des news sur les balouzes sortant bientôt ou déja dans les bacs.
Ibiza pour les plus clubbers d'entre vous...y'a de quoi se régaler dans tout les sens du terme.
Une rubrique Tv/Ciné pour vous montrer mes péchés mignons, l'univers du petit comme du grand écran fait en effet aussi parti de mes hobbies.
Pour ce qui est Clubbing un aperçu des quelques-unes discothèques pour lesquelles j'ai des coup de coeur, ou des clins d'oeil à faire.
Vous êtes fan de Rpg ??? La rubrique console vous est prédestinée...je ne vous en dit pas plus.
Enfin la page de liens, avec les potos qui ont pu me filer un coup de pouce.
</td>
</tr>
<tr>
<td background="preload/index_17.gif" valign="top" width="800" height="15" colspan="8">
Bonne visite Ciao-Ciao !
</td>
</tr>
<tr>
<td colspan="8">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</html>
10 févr. 2005 à 08:52
En fait je souhaite utiliser ce code pour permettre de précharger mon site constitué de pas mal de Jpeg et aussi de Gif animés...Je l'ai optimisé "à mon gout" au maximum mais pour une connexion bas débit c'est pas le top...Même si c'est vrai que ca va encore je n'arrive pas à inclure le code de mon site avec celui-ci.
En fait je fait en grand tableau avec menu déroulant...et ce grand tableau composé de toutes mes images ne se charge pas entierement il s'arrete à 77%.
J ai peut etre une idée mais...L'effet Survol est généré par des fonctions javascript égalment j'ai pris soin de faire en sorte que les variables ne se nomment pas de mm mais bon qui sait...Alors voila le code est dans le post qui suit...
Merci
4 nov. 2004 à 07:36
10 oct. 2004 à 20:42
merciiiiiiiii
10 oct. 2004 à 20:42
merciiiiiiiii
10 oct. 2004 à 19:56
10 oct. 2004 à 19:54
p'tite question qui rejoint la précédente : comment faire un preload de video ? ok on utilise flash mais apres ? paske en decortiquant le script (je suis une nullité notoire en info) j'ai bien l'impression qu'il s'agit d'un preload detectant des images ( "img...") donc le format flash... bref je crois que g été assez clair :)
@+
28 sept. 2004 à 10:23
25 août 2004 à 21:38
En fait, un ami a fait une video d intro pour mon site, mais qd on el fait sois mm on arrive pas tjs a baisser un max pour garder une qualité assez bonne, dc j aimerai pouvoir preloder en fonction de la video, c' ets possible ??
a+, and1hotsauce
17 juil. 2004 à 00:30
16 juil. 2004 à 17:20
<TD align=middle bgColor=#2F4060>
[Veuillez attendre
000%]
,
</TD></TR></TBODY></TABLE>
Vous voyez? jai changer le dossier où se trouve green.gif et red.gif.. L'erreur savez-vous c'était quoi?? C'était seulement que Preload_fichiers.. de 1 : sur internet.. on ne met jamais de majuscule aux fichiers. de 2 : sa marche maintenant !! ahah!! oui! la barre rouge marche #1 et le pourcentage également =))!! Donc!! peut-etre une révision du script serait une bonne idée =P
16 juil. 2004 à 16:58
var i=8; //jai mis 8... mais! c'est logique tout sa.. si vous comprenez bien.. 8 est multiplié par (i+0) et 100.. donc ce que sa donne c'est : 8 x 0 = 0 x 100 =0.. pourquoi sa donne 90?? aucune idée.. mais bon..
function preloadImage(){
var myContent = document.getElementsByTagName("img")
var totalImage = myContent.length
percent = Math.ceil((i+0)*100/totalImage)
En gros.. 100% va apparaitre seulement en faisant sa ici :
var i=2;
function preloadImage(){
var myContent = document.getElementsByTagName("img")
var totalImage = myContent.length
percent = Math.ceil((i+1)*100/totalImage)
Bien sur... encore un problème reviens.. celui que la barre rouge n'apparait pas.. mais! c'est le seul probleme.. alors soit que vous enlever completement cette bar.. ou que vous essayer d'arrangé sa. parce que.. en local.. tout marche.. mais sur internet.. ya que le pourcentage qui monte.. alors.. je me dis.. il y a soit un problème de calcul.. ou un code qui n'est pas bon.. qui sers à rien finalement .. si on ne lui donne pas les bonne config.. bon ! alors c'est votre choix! peut-être que je vais réussir à afficher la barre rouge! salut!
16 juil. 2004 à 16:15
document.get
var i=8; //Vous voyez.. la valeur est à 8.. donc.. il se rend à 90% au lieu de 100%.. mais.. sa peut s'arranger en taponant un peu
function preloadImage(){
var myContent = document.getElementsByTagName("img")
var totalImage = myContent.length
percent = Math.ceil((i+0)*100/totalImage) //la valeur (i+1) a été changé pour (i+0) comme ça.. aucune erreur n'affiche avec le chargement!!
Et Hop!! maintenant.. le problème est réglé! =)
16 juil. 2004 à 16:15
document.get
var i=8; //Vous voyez.. la valeur est à 8.. donc.. il se rend à 90% au lieu de 100%.. mais.. sa peut s'arranger en taponant un peu
function preloadImage(){
var myContent = document.getElementsByTagName("img")
var totalImage = myContent.length
percent = Math.ceil((i+0)*100/totalImage) //la valeur (i+1) a été changé pour (i+0) comme ça.. aucune erreur n'affiche avec le chargement!!
Et Hop!! maintenant.. le problème est réglé! =)
24 juin 2004 à 22:28
J'ai le mme probleme que granduc.
Merci de votre aide
24 juin 2004 à 22:28
J'ai le mme probleme que granduc.
Merci de votre aide
22 juin 2004 à 14:54
25 févr. 2004 à 23:58
Si MAJ mail moi stp :)
28 oct. 2003 à 12:08
Mais je ne comprends pas encore pourquoi il fonctionne à merveille en local mais plus du tout sur mon serveur distant : Plus de décompte ni d'effacement du calque ...