bonjour,

je vous expose mon petit problème....

je suis débutant en javascript et je cherche à précharger une image
avant de l'afficher dans le navigateur.
pour vous situer, la résolution de l'image en question est de 7330 x
900 (pixels) l'image pèse environ 2 Mo.

j'ai fait quelques recherches sur internet mais je n'arrive pas à
trouver qq chose collant complètement à mon besoin

voici le problème :

la page dans laquelle je veux faire ce preload est une page PHP.

- ce php va générer une image unique à chaque visite de 7330 x 900
pixels. (et unique à chaque rechargement de page).
- puis le php va afficher l'image de manière classique --> en faisant
un echo ".....img src= ..

mon problème est le suivant :

je voudrais que cette image ne soit visible que lorsqu'elle est
complètement chargée par le browser de façon à la voir quasi
instantanément apparaitre ( je précise quasi car avec une taille comme
ça, windows, la carte graphique, .... vont entrer en jeu).

et de plus si je rafraichit la page je voudrais que la nouvelle image
généree remplace la précédente de manière instantanée également.

je n'ai pas de contrainte de langage (javascript ou autre
chose ....), dans cette page .php, j'ai déjà du php et du javascript.

si vous avez des idées je suis preneur.....

Bonjour,

bendivx2007@gmail.com wrote:
> je voudrais que cette image ne soit visible que lorsqu'elle est
> complètement chargée par le browser de façon à la voir quasi
> instantanément apparaitre ( je précise quasi car avec une taille comme
> ça, windows, la carte graphique, .... vont entrer en jeu).

En jouant avec "display" en css et "complete" en javascript : tu masques
l'image par défaut et lorsqu'elle est chargé tu l'affiche.

Un truc dans le genre (non testé) :

<img src="ton_image" id="Id_Image" style="display:none">
<script type="text/JavaScript">
setTimeout('Test()', 100);
function Test() {
if (Id_Image.complete){
document.getElementById("Id_Image").style.display = "";
} else {
setTimeout('Test()', 100);
}
}
</script>

> et de plus si je rafraichit la page je voudrais que la nouvelle image
> généree remplace la précédente de manière instantanée également.

Attention si la nouvelle image porte le même nom que la précédente, elle
risque de se retrouver dans le cache du navigateur.

--
Jérôme

En réponse à bendivx2007@gmail.com qui nous a susurré, en date du :
19/07/07 16:38, le message sibyllin suivant :
> bonjour,
>
> je vous expose mon petit problème....
>
> je suis débutant en javascript et je cherche à précharger une image
> avant de l'afficher dans le navigateur.

Il vaut nettement mieux faire du post chargement :-)

JS dans le head :
=================
function charge_img(fichier, lieu) {
var I = new Image();
I.onload = function() {
if(document.getElementById)
document.getElementById(lieu).src = I.src
else
document.images[lieu].src = I.src;
}
I.src = fichier;
}
// post chargement
window.onload = function() {
charge_img('<?= $grde_vue ?>', 'visu'); };

HTML :
======
<img id="visu" name="visu" src="attente.gif" alt="" >


> pour vous situer, la résolution de l'image en question est de 7330 x
> 900 (pixels) l'image pèse environ 2 Mo.
>
> j'ai fait quelques recherches sur internet mais je n'arrive pas à
> trouver qq chose collant complètement à mon besoin
>
> voici le problème :
>
> la page dans laquelle je veux faire ce preload est une page PHP.
>
> - ce php va générer une image unique à chaque visite de 7330 x 900
> pixels. (et unique à chaque rechargement de page).
> - puis le php va afficher l'image de manière classique --> en faisant
> un echo ".....img src= ..


Assez simple :

dans le html,
1) là où on veut la grande image
<img name="visu" src="wait.gif" alt="visuel image" />
l'image wait.gif pourrait être : [attente chargement]

2) juste avant le </body> :
<img style="position:absolute;left:-4000px;" src="grde_vue.jpg" alt=""
onload="document.images['visu'].src=this.src">


Plus simple ?

<img src="grde_vue.jpg" style="visibility:hidden" alt=""
onload="this.style.visibility='visible';">


Variante (on connait la taille maxi de l'image) :

CSS :
=====
#visu { width: 7330px; height: 900px;
background: url(wait.gif) no-repeat center center #ddd; }
#visu.visu { background-image: url(grde_vue.jpg); }

HTML :
======
<body onload="document.visu.className='visu';">
<img id="visu" name="visu" src="vide.gif" alt="visualisateur" "title="">


> et de plus si je rafraichit la page je voudrais que la nouvelle image
> généree remplace la précédente de manière instantanée également.

Pas ni compris ...
puisqu'on recharge une page avec une nouvelle image
le php n'a qu'à modifier là où il faut, non ?



--
Stephane Moriaux et son (moins) vieux Mac

merci pour vos réponses !!!!!


On 20 juil, 11:49, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:

> Plus simple ?
>
> <img src="grde_vue.jpg" style="visibility:hidden" alt=""
> onload="this.style.visibility='visible';">

nickel !!!


>> si je rafraichit la page je voudrais que la nouvelle image
> > généree remplace la précédente de manière instantanée également.
>
> Pas ni compris ...
> puisqu'on recharge une page avec une nouvelle image
> le php n'a qu'à modifier là où il faut, non ?
>
> --

oui, effectivement faut que j'explique un peu mieux .... :-)

en fait, cette page est une photo prise d'une webcam, ma page php
récupère la dernière image prise, la traite pour ajouter différentes
infos (grace au php) la stocke avec un nom aléatoire sur mon
"serveur" puis, celle ci est affichée dans le navigateur. (le nom
aléatoire c'est pour éviter que le navigateur m'affiche celle qui est
en cache).

pour ce qui est du préchargement, c'est nickel, par contre j'utilise
la fonction de "refresh" afin de raffraichir la page à intervalle
régulier, et avoir ainsi toujours l'image affichée = la dernière
image prise par la webcam !!!! (voila pourquoi je ne veux
impérativement pas qu'il prenne celle en cache).

et ce je voudrais c'est que lorsque le refresh s'effectue la
transition entre la nouvelle photo et l'ancienne se fasse de manière
quasi instantanée (et éviter d'avoir un écran vide pendant 30
secondes .....).

j'avais pensé au départ a un effet de fading entre les images mais
avec une taille pareil, ça risque d'être très moche car pas très
fluide, du coup une transition instanée me va bien ...

en tout cas merci pour vos infos

En réponse à bendivx2007@gmail.com qui nous a susurré, en date du :
20/07/07 15:41, le message sibyllin suivant :
>
> pour ce qui est du préchargement, c'est nickel, par contre j'utilise
> la fonction de "refresh" afin de raffraichir la page à intervalle
> régulier, et avoir ainsi toujours l'image affichée = la dernière
> image prise par la webcam !!!! (voila pourquoi je ne veux
> impérativement pas qu'il prenne celle en cache).
>
> et ce je voudrais c'est que lorsque le refresh s'effectue la
> transition entre la nouvelle photo et l'ancienne se fasse de manière
> quasi instantanée (et éviter d'avoir un écran vide pendant 30
> secondes .....).

alors tu
- donnes toujours le même nom à la dernière image (ie:'webcam_img.jpg')
- et mets en bac la précédente (ou pas ?)
- rafraichis via JS

<script type="text/javascript">
function newImg() {
var I = new Image();
I.onload = function() {
if(document.getElementById)
document.getElementById('visu').src = I.src
else
document.visu.src = I.src;
setTimeout('newImg()', 300000);
}
I.src = 'webcam_img.jpg?'+Math.random();
}
window.onload = newImg;
</script>
<img id="visu" name="visu" src="webcam_img.jpg"
style="visiblity:hidden"
onload="this.style.visibility='visible';"
alt="vue webcam" title="ma webcam">
vue actualisée toutes les 5 minutes


on peut améliorer avec un effet de transition par fadding

--
Stephane Moriaux et son (moins) vieux Mac

En réponse à bendivx2007@gmail.com qui nous a susurré, en date du :
20/07/07 15:41, le message sibyllin suivant :
>
> et avoir ainsi toujours l'image affichée = la dernière
> image prise par la webcam !!!! (voila pourquoi je ne veux
> impérativement pas qu'il prenne celle en cache).

bon ... le fichier php rafraichi est re-enregistré ?
donc le brouteur ira pêcher celui-là au lieu de celui en cache.

l'image dans nouveau fichier php a changé de nom, donc OK

> et ce je voudrais c'est que lorsque le refresh s'effectue la
> transition entre la nouvelle photo et l'ancienne se fasse de manière
> quasi instantanée (et éviter d'avoir un écran vide pendant 30
> secondes .....).

Oh la la ! tu en veux des choses !

Là sans JS je vois pas comment y parvenir.

> j'avais pensé au départ a un effet de fading entre les images mais
> avec une taille pareil, ça risque d'être très moche car pas très
> fluide, du coup une transition instanée me va bien ...

une nouvelle piste ?
Non ?
Bon tant pis, la voilà ...

fichier principal :

<html>
<iframe width=1 height=1 src='webcam.php'></iframe>
<img src="attente.gif" alt="attente webcam" name="visu">
</html>


le fichier webcam.php :

<?php
// tout l'truc pour créer l'image
$webcam = ''; // son chemin et nom
?>
<html>
<META http-equiv="refresh" content="300" />
<img src="<?= $webcam ?>"
onload="parent.document.visu.src=this.src">
</html>


--
Stephane Moriaux et son (moins) vieux Mac

merci pour votre aide.
je vais essayer de tester ça ce week end.

a+

bendivx2007@gmail.com -
<1184938918.332052.113850@n2g2000hse.googlegroups. com> :

> la stocke avec un nom aléatoire sur mon
> "serveur"

En utilisant un nom incrémenté tu peux déjà faire des choses interessantes
aussi...

--
"C'est très facile d'avoir des idées de partage quand on n'a rien."
PatriceKARATCHENTZEFF