Préchargement complet image avant son affichage

Le
bendivx2007
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 égaleme=
nt.

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..
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
jerome
Le #748035
Bonjour,

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

ASM
Le #747777
En réponse à 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 :
=====

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
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 :
=====

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

bendivx2007
Le #747776
merci pour vos réponses !!!!!


On 20 juil, 11:49, ASM 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 éga lement.


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


ASM
Le #747775
En réponse à 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

ASM
Le #747774
En réponse à 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>
</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

bendivx2007
Le #747500
merci pour votre aide.
je vais essayer de tester ça ce week end.

a+
Rakotomandimby (R12y) Mihamina
Le #747498
-

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."
Patrice KARATCHENTZEFF

Publicité
Poster une réponse
Anonyme