Bonjour;
Comment fait on une page d'attente pour le chargement de tous mes images de
ma page ?
Bonjour;
Comment fait on une page d'attente pour le chargement de tous mes images de
ma page ?
Bonjour;
Comment fait on une page d'attente pour le chargement de tous mes images de
ma page ?
Dave wrote:Bonjour;
Comment fait on une page d'attente pour le chargement de tous mes images
de ma page ?
Je suppose que c'est toujours le problème du diaporama ?
(voir liens en bas)
images ou imagettes (vignettes) ? ?
pour les imagettes, elles sont écrites sur la page
ce ne doit donc pas être çà ;-)
pour les images (grdes vues) ce n'est, normalement pas nécessaire
-> à quoi bon charger ttes les images et faire inutilement attendre
si, au final, le visiteur ne va en regarder que 2 ou 3 ?
donc choisir un *post* chargement
c a d :
d'abord déclarer toutes les images
puis, après chargement de la page,
faire une boucle pour les mettre en cache
sinon, sans mise en cache pré-post-chargement,
pour un message d'attente en attendant la gde image :
(je suppose que l'image est affichée dans une image déjà en place)
<html>
<style type="text/css">
#affichage { position:absolute; top:0px;left:0px; width:
600px;height:100%}
#wait { font-size: 200%; color: red; text-align: center; display:none;}
#accueil { margin-top: 200px;text-align: center;}
#aff { visibility: hidden;position:absolute;top:50%;left:50%; }
#diaporama { position:absolute; top:10px;left:610px; width: 150px;
border: 1px solid #666;
height:100%; text-align:center; overflow:auto; }
#diaporama a { display:block;margin:auto;text-align:center; }
#diaporama img { border: none; }
#diaporama h1 { font-size: 90%; text-align: center; }
</style>
<div id="affichage">
<h2 id="wait">En attente de chargement ... </h2>
<p id="accueil">
Cliquer une des imagettes de droite pour la voir en grand ici
</p>
<img id="aff" src=""
onload="
// quand la nvelle image est finie d'être chargée :
// mise à la taille de l'image
this.style.height=this.height+'px';
this.style.width=this.width+'px';
// centrage image
this.style.marginLeft='-'+this.width/2+'px';
this.style.marginTop='-'+this.height/2+'px';
// cache message
with(document.getElementById('wait').style) {
visibility='hidden';
display='none';
}
// montre image
this.style.visibility='visible';
this.style.display='';">
</div>
<script type="text/javascript">
function afficher(vue) {
// cacher message accueil
with(document.getElementById('accueil').style) {
visibility='hidden';
display='none';
}
// cacher ancienne image
with(document.getElementById('aff').style) {
visibility='hidden';
display='none';
}
// montrer message attente
with(document.getElementById('wait').style) {
visibility='visible';
display='';
}
// charger-afficher nouvelle image à sa place
document.images['aff'].src = vue;
}
</script>
<div id="diaporama">
<h1>Diaporama</h1>
<a href="photos/002.jpg"
onclick="afficher(this.href);return false;"><img
src="imagettes/001.jpg"></a>
<a href="photos/002.jpg"
onclick="afficher(this.href);return false;"><img
src="imagettes/002.jpg"></a>
<a href="photos/003.jpg"
onclick="afficher(this.href);return false;"><img
src="imagettes/003.jpg"></a>
</div>
</html>
A NOTER :
======== > mon NC4.5 ne saura pas faire gd chose de ce que donné ci-avant
Qques liens :
============ > exemples diaporamas :
http://perso.wanadoo.fr/stephane.moriaux/internet/web_html/pass_vue/
autres idées d'affichages :
1) dans un div caché avec message d'attente
version spéciale IE
http://perso.wanadoo.fr/stephane.moriaux/truc/popup_image_auto_3_ie.shtml
2) autres démos (4 pages)
http://perso.wanadoo.fr/stephane.moriaux/truc/popup_image_auto_1.shtml
3) curiosité :
http://perso.wanadoo.fr/stephane.moriaux/truc/pop_zoom.shtml
--
Stephane Moriaux et son [moins] vieux Mac
Dave wrote:
Bonjour;
Comment fait on une page d'attente pour le chargement de tous mes images
de ma page ?
Je suppose que c'est toujours le problème du diaporama ?
(voir liens en bas)
images ou imagettes (vignettes) ? ?
pour les imagettes, elles sont écrites sur la page
ce ne doit donc pas être çà ;-)
pour les images (grdes vues) ce n'est, normalement pas nécessaire
-> à quoi bon charger ttes les images et faire inutilement attendre
si, au final, le visiteur ne va en regarder que 2 ou 3 ?
donc choisir un *post* chargement
c a d :
d'abord déclarer toutes les images
puis, après chargement de la page,
faire une boucle pour les mettre en cache
sinon, sans mise en cache pré-post-chargement,
pour un message d'attente en attendant la gde image :
(je suppose que l'image est affichée dans une image déjà en place)
<html>
<style type="text/css">
#affichage { position:absolute; top:0px;left:0px; width:
600px;height:100%}
#wait { font-size: 200%; color: red; text-align: center; display:none;}
#accueil { margin-top: 200px;text-align: center;}
#aff { visibility: hidden;position:absolute;top:50%;left:50%; }
#diaporama { position:absolute; top:10px;left:610px; width: 150px;
border: 1px solid #666;
height:100%; text-align:center; overflow:auto; }
#diaporama a { display:block;margin:auto;text-align:center; }
#diaporama img { border: none; }
#diaporama h1 { font-size: 90%; text-align: center; }
</style>
<div id="affichage">
<h2 id="wait">En attente de chargement ... </h2>
<p id="accueil">
Cliquer une des imagettes de droite pour la voir en grand ici
</p>
<img id="aff" src=""
onload="
// quand la nvelle image est finie d'être chargée :
// mise à la taille de l'image
this.style.height=this.height+'px';
this.style.width=this.width+'px';
// centrage image
this.style.marginLeft='-'+this.width/2+'px';
this.style.marginTop='-'+this.height/2+'px';
// cache message
with(document.getElementById('wait').style) {
visibility='hidden';
display='none';
}
// montre image
this.style.visibility='visible';
this.style.display='';">
</div>
<script type="text/javascript">
function afficher(vue) {
// cacher message accueil
with(document.getElementById('accueil').style) {
visibility='hidden';
display='none';
}
// cacher ancienne image
with(document.getElementById('aff').style) {
visibility='hidden';
display='none';
}
// montrer message attente
with(document.getElementById('wait').style) {
visibility='visible';
display='';
}
// charger-afficher nouvelle image à sa place
document.images['aff'].src = vue;
}
</script>
<div id="diaporama">
<h1>Diaporama</h1>
<a href="photos/002.jpg"
onclick="afficher(this.href);return false;"><img
src="imagettes/001.jpg"></a>
<a href="photos/002.jpg"
onclick="afficher(this.href);return false;"><img
src="imagettes/002.jpg"></a>
<a href="photos/003.jpg"
onclick="afficher(this.href);return false;"><img
src="imagettes/003.jpg"></a>
</div>
</html>
A NOTER :
======== > mon NC4.5 ne saura pas faire gd chose de ce que donné ci-avant
Qques liens :
============ > exemples diaporamas :
http://perso.wanadoo.fr/stephane.moriaux/internet/web_html/pass_vue/
autres idées d'affichages :
1) dans un div caché avec message d'attente
version spéciale IE
http://perso.wanadoo.fr/stephane.moriaux/truc/popup_image_auto_3_ie.shtml
2) autres démos (4 pages)
http://perso.wanadoo.fr/stephane.moriaux/truc/popup_image_auto_1.shtml
3) curiosité :
http://perso.wanadoo.fr/stephane.moriaux/truc/pop_zoom.shtml
--
Stephane Moriaux et son [moins] vieux Mac
Dave wrote:Bonjour;
Comment fait on une page d'attente pour le chargement de tous mes images
de ma page ?
Je suppose que c'est toujours le problème du diaporama ?
(voir liens en bas)
images ou imagettes (vignettes) ? ?
pour les imagettes, elles sont écrites sur la page
ce ne doit donc pas être çà ;-)
pour les images (grdes vues) ce n'est, normalement pas nécessaire
-> à quoi bon charger ttes les images et faire inutilement attendre
si, au final, le visiteur ne va en regarder que 2 ou 3 ?
donc choisir un *post* chargement
c a d :
d'abord déclarer toutes les images
puis, après chargement de la page,
faire une boucle pour les mettre en cache
sinon, sans mise en cache pré-post-chargement,
pour un message d'attente en attendant la gde image :
(je suppose que l'image est affichée dans une image déjà en place)
<html>
<style type="text/css">
#affichage { position:absolute; top:0px;left:0px; width:
600px;height:100%}
#wait { font-size: 200%; color: red; text-align: center; display:none;}
#accueil { margin-top: 200px;text-align: center;}
#aff { visibility: hidden;position:absolute;top:50%;left:50%; }
#diaporama { position:absolute; top:10px;left:610px; width: 150px;
border: 1px solid #666;
height:100%; text-align:center; overflow:auto; }
#diaporama a { display:block;margin:auto;text-align:center; }
#diaporama img { border: none; }
#diaporama h1 { font-size: 90%; text-align: center; }
</style>
<div id="affichage">
<h2 id="wait">En attente de chargement ... </h2>
<p id="accueil">
Cliquer une des imagettes de droite pour la voir en grand ici
</p>
<img id="aff" src=""
onload="
// quand la nvelle image est finie d'être chargée :
// mise à la taille de l'image
this.style.height=this.height+'px';
this.style.width=this.width+'px';
// centrage image
this.style.marginLeft='-'+this.width/2+'px';
this.style.marginTop='-'+this.height/2+'px';
// cache message
with(document.getElementById('wait').style) {
visibility='hidden';
display='none';
}
// montre image
this.style.visibility='visible';
this.style.display='';">
</div>
<script type="text/javascript">
function afficher(vue) {
// cacher message accueil
with(document.getElementById('accueil').style) {
visibility='hidden';
display='none';
}
// cacher ancienne image
with(document.getElementById('aff').style) {
visibility='hidden';
display='none';
}
// montrer message attente
with(document.getElementById('wait').style) {
visibility='visible';
display='';
}
// charger-afficher nouvelle image à sa place
document.images['aff'].src = vue;
}
</script>
<div id="diaporama">
<h1>Diaporama</h1>
<a href="photos/002.jpg"
onclick="afficher(this.href);return false;"><img
src="imagettes/001.jpg"></a>
<a href="photos/002.jpg"
onclick="afficher(this.href);return false;"><img
src="imagettes/002.jpg"></a>
<a href="photos/003.jpg"
onclick="afficher(this.href);return false;"><img
src="imagettes/003.jpg"></a>
</div>
</html>
A NOTER :
======== > mon NC4.5 ne saura pas faire gd chose de ce que donné ci-avant
Qques liens :
============ > exemples diaporamas :
http://perso.wanadoo.fr/stephane.moriaux/internet/web_html/pass_vue/
autres idées d'affichages :
1) dans un div caché avec message d'attente
version spéciale IE
http://perso.wanadoo.fr/stephane.moriaux/truc/popup_image_auto_3_ie.shtml
2) autres démos (4 pages)
http://perso.wanadoo.fr/stephane.moriaux/truc/popup_image_auto_1.shtml
3) curiosité :
http://perso.wanadoo.fr/stephane.moriaux/truc/pop_zoom.shtml
--
Stephane Moriaux et son [moins] vieux Mac
Merci pour ta reponse
mais je voudrais en fait mettre un message d'attente tant que les images ne
sont pas chargées
dans cette page http://ygda.free.fr/hscroll3.htm
j'utilise cette exemple pour travailler
Merci pour ton aide
Merci pour ta reponse
mais je voudrais en fait mettre un message d'attente tant que les images ne
sont pas chargées
dans cette page http://ygda.free.fr/hscroll3.htm
j'utilise cette exemple pour travailler
Merci pour ton aide
Merci pour ta reponse
mais je voudrais en fait mettre un message d'attente tant que les images ne
sont pas chargées
dans cette page http://ygda.free.fr/hscroll3.htm
j'utilise cette exemple pour travailler
Merci pour ton aide
Dave wrote:Merci pour ta reponse
mais je voudrais en fait mettre un message d'attente tant que les images
ne sont pas chargées
dans cette page http://ygda.free.fr/hscroll3.htm
Pas d'pot, çà fait au moins la 3ième fois que je visite cette page
tout est déjà en cache et le chargement est immédiatj'utilise cette exemple pour travailler
Comme ce sont des vignettes
comme elles sont petites(*) (environ 1 à 2 ko chacune ?)
comme les premières sont sans doute rapidement chargées
Je suppose que le scroll peut commencer avant complet chargement
Bref ! je ne comprends pas le pourquoi de ta question.
sinon tu regardais mon idée
(copier-coller et y mettre des images de son site)
pour l'appliquer partiellement à ton truc :Merci pour ton aide
(*) les vignettes présentées sur 'hscroll3.htm'
pèsent environ 1,5 ko
Il faut qu'avec ton nouveau soft de traficotage de photos pour
composition de diaporama, tu arrives à faire des imagettes de ce
poids ou à peu près.
Avec 26 images de 1,5 ko ça nous fait
qque chose comme : 50 ko la page (y compris html, js et css)
-> rien d'inacceptable, même en RTC
Il vaut mieux avoir 3 diaporamas de 25 images
plutôt qu'un seul de 75 vues
--
Stephane Moriaux et son [moins] vieux Mac
Dave wrote:
Merci pour ta reponse
mais je voudrais en fait mettre un message d'attente tant que les images
ne sont pas chargées
dans cette page http://ygda.free.fr/hscroll3.htm
Pas d'pot, çà fait au moins la 3ième fois que je visite cette page
tout est déjà en cache et le chargement est immédiat
j'utilise cette exemple pour travailler
Comme ce sont des vignettes
comme elles sont petites(*) (environ 1 à 2 ko chacune ?)
comme les premières sont sans doute rapidement chargées
Je suppose que le scroll peut commencer avant complet chargement
Bref ! je ne comprends pas le pourquoi de ta question.
sinon tu regardais mon idée
(copier-coller et y mettre des images de son site)
pour l'appliquer partiellement à ton truc :
Merci pour ton aide
(*) les vignettes présentées sur 'hscroll3.htm'
pèsent environ 1,5 ko
Il faut qu'avec ton nouveau soft de traficotage de photos pour
composition de diaporama, tu arrives à faire des imagettes de ce
poids ou à peu près.
Avec 26 images de 1,5 ko ça nous fait
qque chose comme : 50 ko la page (y compris html, js et css)
-> rien d'inacceptable, même en RTC
Il vaut mieux avoir 3 diaporamas de 25 images
plutôt qu'un seul de 75 vues
--
Stephane Moriaux et son [moins] vieux Mac
Dave wrote:Merci pour ta reponse
mais je voudrais en fait mettre un message d'attente tant que les images
ne sont pas chargées
dans cette page http://ygda.free.fr/hscroll3.htm
Pas d'pot, çà fait au moins la 3ième fois que je visite cette page
tout est déjà en cache et le chargement est immédiatj'utilise cette exemple pour travailler
Comme ce sont des vignettes
comme elles sont petites(*) (environ 1 à 2 ko chacune ?)
comme les premières sont sans doute rapidement chargées
Je suppose que le scroll peut commencer avant complet chargement
Bref ! je ne comprends pas le pourquoi de ta question.
sinon tu regardais mon idée
(copier-coller et y mettre des images de son site)
pour l'appliquer partiellement à ton truc :Merci pour ton aide
(*) les vignettes présentées sur 'hscroll3.htm'
pèsent environ 1,5 ko
Il faut qu'avec ton nouveau soft de traficotage de photos pour
composition de diaporama, tu arrives à faire des imagettes de ce
poids ou à peu près.
Avec 26 images de 1,5 ko ça nous fait
qque chose comme : 50 ko la page (y compris html, js et css)
-> rien d'inacceptable, même en RTC
Il vaut mieux avoir 3 diaporamas de 25 images
plutôt qu'un seul de 75 vues
--
Stephane Moriaux et son [moins] vieux Mac
Merci pour ta reponse
mais si on clique sur la navigation avant meme d'attendre le chargement des
photos
on interrompt alors son chargement il est là le probleme :(
merci quand meme
Merci pour ta reponse
mais si on clique sur la navigation avant meme d'attendre le chargement des
photos
on interrompt alors son chargement il est là le probleme :(
merci quand meme
Merci pour ta reponse
mais si on clique sur la navigation avant meme d'attendre le chargement des
photos
on interrompt alors son chargement il est là le probleme :(
merci quand meme
Comment fait on une page d'attente pour le chargement de tous mes images
de
ma page ?
Comment fait on une page d'attente pour le chargement de tous mes images
de
ma page ?
Comment fait on une page d'attente pour le chargement de tous mes images
de
ma page ?