Rafraîchissement de l'image sans rafraîchir toute la page?

**Ravarin** · 07/03/2006, 20h36

Bonjour, je me demandais s'il y avait moyen de rafraîchir l'image, soit de prendre la nouvelle version de l'image sur le serveur, sans pour autant rafraîchir toute la page. Voici un petit exemple de ce que je veux faire, mais qui, malheureusement ne fonctionne pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<script language="javascript">
function image() {
        var img = new Image();
        img.src = "0.png";
        document.getElementById(0).setAttribute("background",img.src);
    }
    setTimeout("image()",1000);
}
</script>

Alors voilà, à chaque seconde je veux rafraîchir l'arrière-plan du tableau avec la nouvelle version de l'image et non celle gardé en mémoire lors du dernier rafraîchissement de toute la page.

Des idées? C'est possible en javascript ou je vais devoir faire appel au AJAX...? Si vous avez des idées de langages qui le permettent, veuillez me le signaler s'il vous plaît. Merci.

**azertyman** · 07/03/2006, 21h46

à chaque seconde je veux rafraîchir l'arrière-plan

t'a pensé au temps de chargement ?

**Ravarin** · 07/03/2006, 21h55

Oublions le temps de chargement, ce n'est pas un problème.

**m@t** · 07/03/2006, 22h06

As tu essayé comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function image() {
        var img = new Image();
        img.src = "0.png";
 
        document.getElementById('tab').backgroundImage = img.src;
 
    setTimeout("image()",1000);
}

et le tableau comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<table id="tab" style="background-image:url(../images/depart.png);">

**Ravarin** · 08/03/2006, 02h39

L'image s'affiche très bien, si je change d'image, il y a aucun problème. Le problème est par exemple si je fais afficher l'image 0 en boucle et que sur le serveur, je modifie l'image 0, l'image affiché sur le site va rester l'ancienne version de l'image 0 qui c'est fait lors du dernier rafraîchissement complèt de la page. J'en conclue donc que le problème vient de la cache. Il load tous les images en cache lors du load de la page et qu'il faut rafraîchir la page pour que le cache se rafraîchisse.

Le timeout fonctionne également très bien, si je fais un changement d'image dans l'arrière-plan de l'image 0 à l'image 1, sa fonctionne.

Je ne crois pas qu'il aille une solution à tout ça, c'est pour cela je vous demande de l'aide :/. Merci.

**SpaceFrog** · 08/03/2006, 08h40

un aller retour serveur ???
il y a eu un post y'a pas longtemps avec l'utilisation d'ajax pour des images ... mais je ne sais pas si c'est appliquable dans ton cas ...

**denisC** · 08/03/2006, 09h07

Envoyé par Ravarin

L'image s'affiche très bien, si je change d'image, il y a aucun problème. Le problème est par exemple si je fais afficher l'image 0 en boucle et que sur le serveur, je modifie l'image 0, l'image affiché sur le site va rester l'ancienne version de l'image 0 qui c'est fait lors du dernier rafraîchissement complèt de la page. J'en conclue donc que le problème vient de la cache. Il load tous les images en cache lors du load de la page et qu'il faut rafraîchir la page pour que le cache se rafraîchisse.

Le timeout fonctionne également très bien, si je fais un changement d'image dans l'arrière-plan de l'image 0 à l'image 1, sa fonctionne.

Je ne crois pas qu'il aille une solution à tout ça, c'est pour cela je vous demande de l'aide :/. Merci.

Il faut mettre un header HTTP correct (pragma no-cache et Expire 0) sur ton image pour que ça fonctionne. Et pour ça, soit tu configures ton serveur web (IIS ou Apache?) soit tu créé une page coté serveur (PHP ou JSP) qui renvoit les bons headers avec l'image après.

Je ne vois pas vraiment ce qu'Ajax vient faire dans l'histoire

**titoumimi** · 08/03/2006, 09h10

bah AJAX permettrai de rafraichir uniquement l'image, et non pas la page entière... Non ?

**denisC** · 08/03/2006, 09h13

Envoyé par titoumimi

bah AJAX permettrai de rafraichir uniquement l'image, et non pas la page entière... Non ?

Euh, non, je ne vois vraiment pas comment.... Je veux bien qu'on m'explique. En faisant transiter le flux binaire de l'image via une requete HTTP

Et on l'integre dans la page de quelle façon

Pour moi, le javascript et le binaire, c'est pas bon.

**SpaceFrog** · 08/03/2006, 09h15

ben justement j'ai vu un post là dessus y'a pas très longtemps que je ne retrouve pas, il s'agissant bein en effet de flux binaire ...
Et le type avait bien son image dans sa page ...

**denisC** · 08/03/2006, 09h16

Envoyé par SpaceFrog

ben justement j'ai vu un post là dessus y'a pas très longtemps que je ne retrouve pas, il s'agissant bein en effet de flux binaire ...
Et le type avait bien son image dans sa page ...

Ben j'achete alors. Il est ou ce post?

**SpaceFrog** · 08/03/2006, 09h20

je pensais même que c'était toi qui y avait répondu ...
je crois que c'était sur html ...
je recherche ...

**denisC** · 08/03/2006, 09h22

Envoyé par SpaceFrog

je pensais même que c'était toi qui y avait répondu ...

Celui qui parlait d'images et d'ajax et ou j'avais répondu, c'était pour dire que Ajax n'avait rien à voir avec le problème

Style ce post:
http://www.developpez.net/forums/vie...615736#2615736

Ma position n'a pas changé

**titoumimi** · 08/03/2006, 09h29

avec AJAX, tu appelle une page HTML qui contient juste ta balise image, avec comme cible le div où est déjà contenu ton image...

Si ca ca te la rafraichit pas, faudra me réexpliquer AJAX

EDIT : à supposer qu'en javascript, il y ai moyen d'exécuter une fonction de façon cyclique, mais je ne pense pas que ca pose de gros soucis...

**denisC** · 08/03/2006, 09h37

Envoyé par titoumimi

avec AJAX, tu appelle une page HTML qui contient juste ta balise image, avec comme cible le div où est déjà contenu ton image...

Si ca ca te la rafraichit pas, faudra me réexpliquer AJAX

Lol, le fait de changer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img src="blabla.jpg">

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img src="blabla.jpg">

Provenant d'une requete Ajax ne changera certainement pas l'image

A mon avis, c'est pas Ajax qu'il faut réexpliquer, mais HTML..... Le code HTML ne contient qu'une indication de localisation de l'image. En gros tu dis au navigateur, ici affiche l'image qui habite au 19 rue du chat qui louche. Le nacigateur va à l'adresse et cherche l'image.
Si avec ajax tu changes la balise image (au simplement avec javascript, ce que fait le monsieur dans sa question, ajax n'a auncun intéret ici), tu lui dit juste, finalement, je veux que tu me mettes ici l'image qui habite au 19 rue du chat qui louche. La le navigateur se dit, je vais aller cherche l'image. Sauf qu'il y a déjà été et l'a encore en cache, et comme il est du genre flemmard, il va prendre l'image qu'il a en cache plutot que de retourner la chercher.

Donc pas d'Ajax possible dans ce cas. Dans la norme HTML, les images ne sont pas envoyées avec la page. La page ne contient que les adresses, charge au navigateur de se débrouiller. C'est ce qui fait que les navigateurs texte (type Lynx) fonctionne bien plus vite: ils ne vont pas chercher les images.

**SpaceFrog** · 08/03/2006, 09h39

Milles excuses DenisC c'est bien de ce post là dont je parlais ...
Ma mémoire me joue des tours, j'étais persuadé que c'était encore un coup d'ajax ... mais en effet ce serait monter une usine à gaz titou ... une page dédiée à l'image

sinon un truc bien crad: un iframe ?

**denisC** · 08/03/2006, 09h50

Envoyé par SpaceFrog

sinon un truc bien crad: un iframe ?

Quelque soit la technique, l'important c'est les headers HTTP.

LA solution la plus propre, c'est la configuration du serveur (mais avec Apache c'est loin d'être une partie de plaisir, et sous IIS, aucune idée).

La plus simple, je pense que c'est une page PHP qui wrappe l'image....

**titoumimi** · 08/03/2006, 09h53

rahhh, ca me contrarie fortement tout ca

même en mettant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

dans ma page (et en ayant vidé le cache), il refuse de me recharger l'image le bougre

**titoumimi** · 08/03/2006, 10h18

Bon allez, c'est fait, sans PHP, sans AJAX, juste en javascript...

http://titoumimi.free.fr/rafraichir_image.zip

l'astuce, c'est de savoir qu'afficher toto.jpg?123 et toto.jpg?456 ca recharge complètement l'image à partir du serveur ;-)

(Merci au passage à SF pour son coup de main javascript)

Il suffit dez modifier l'image, et de cliquer sur le reload, et hop, la nouvelle version toute fraiche qui s'affiche ;-)

**denisC** · 08/03/2006, 10h31

Envoyé par titoumimi

rahhh, ca me contrarie fortement tout ca

même en mettant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

dans ma page (et en ayant vidé le cache), il refuse de me recharger l'image le bougre

Rajoute un:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<META HTTP-EQUIV="expires" CONTENT="0">

Ca aide, surtout pour IE..... Mais il faut mettre ces indications dans l'entete HTTP de l'image, pas de la page.

Rafraîchissement de l'image sans rafraîchir toute la page?

JavaScript

Discussions similaires

Partager

Partager