Discussion :

[Dam06]

Bonjour à tous,

J'ai un probleme de rafraichissement de ma page:
j'ai dessiné l'interface graphique sous photoshhop, puis je l'ai découpée en plusieurs images (elles sont en png et l'ensemble fait 93ko).
Sur ma page, c'est un tableau qui contient ces différentes images ainsi que certaines variables.
Pour mettre à jour ces variables je reactualise la page toute les 10 sec, mais j'ai un effet de scintillement quand le bloc d'images apparait.

Exist-il un moyen pour eviter le rechargement systématique des images ?

Pour info, cette page ne sera visible que sur un réseau local, donc je n'ai pas de souci de temps de chargement.

Si vous avez une solution, je suis preneur !!
Merci.

[gwinyam]

En dynamisant le site pour ne recharger que les données et pas l'interface?

[Dam06]

Et comment je pourai faire pour dynamiser le site ?

[Dam06]

Je vien de faire un test, sous IE 7 je n'ai pas le probléme, apparament sa ne le fait que sur les versions antérieur.
Il y a peut-être une meilleur gestion du cache ?

[gwinyam]

Possible pour le cache, je ne suis pas expert sur le fonctionnement des navigateurs

Par contre pour dynamiser le site, l'utilisation de javascript et surtout d'Ajax peut peut-être être intéressante.

[Dam06]

Ajax est-il basé sur le HTML ou demande t il une compatibilité particuliaire du serveur?

Je vous explique mon probleme; cette page doit-être affichée par le serveur web embarqué d'une carte fonctionnant sous linux, or, à l'heure actuelle je ne sais pas quelle serveur web sera implémenté et donc si il supportera le protcole Ajax.

[gwinyam]

Ce n'est absolument pas un protocole. Ajax fonctionne grâce à des instructions en javascript. Il n'y a rien de spécial à installer, tout étant supporté par les navigateurs modernes qui acceptent le javascript.

Dico du développeur : Ajax

[Dam06]

Ok, dans ce cas, c'est tout à fait ce que je recherche. je vais aller fouiller un peu sur le net voir si je trouve des exemples ou des tutos.

Merci beaucoup pour ces info !

[gwinyam]

Je te conseille d'utiliser Prototype. C'est un framework bien pensé et disposant d'une bonne communauté ce qui permet de te débloquer rapidement si tu rencontres un problème.

De plus il y a quelques très bons tutoriels ici même:
Documentation et initiation
Se simplifier la vie

Bon courage

[Bovino]

Personnellement, si c'est juste pour implémenter une requête Ajax, je pense que jQuery est plus adapté que Prototype...
Il est plus léger et probablement plus simple à appréhender au départ.

[gwinyam]

Possible, je n'utilise pas JQuery et ne sait pas vraiment comment ça se présente.

Cependant, je parle bien de prototype, pas de scriptaculous hein.

C'est juste un fichier à appeller avec la balise script puis 3 ou 4 lignes de codes. Il fait ça plus simplement jQuery?

[Bovino]

Plus simplement pas forcément, c'est une question d'habitude, même si perso je préfère aussi prototype qui est plus puissant.
Cependant, je trouve jQuery plus souple dans la sélection d'éléments... Et il est moins volumineux.
A part ça, je préfère Prototype qui possède plus de fonctionnalités utiles pour moi.

[Er3van]

Pas besoin de dynamiser le site, le dynamiter c'est toi qui voit.... ^^'

Donne des id à tes cases de ton tableau, et affecte à chaque case un background-image dans un fichier CSS.

Le CSS est prioritaire dans le cache il me semble, et c'est pour ça qu'il s'affichera en premier, et donc, tu ne verras pas de rafraichissement, même sur IE 6 normalement.

D'ailleurs, l'effet de scintillement ne provient que d'IE 6 non ? C'est normal, gestion de cache "daubée".

[12monkeys]

Bonjour

Le CSS est prioritaire dans le cache il me semble, et c'est pour ça qu'il s'affichera en premier, et donc, tu ne verras pas de rafraichissement, même sur IE 6 normalement.

Je ne suis pas un spécialiste, mais mon expérience me fais dire le contraire : j'ai récemment placé sur les balises img en background (par css) une petite image censée faire patienter le visiteur lors du chargement des images (autant thumbs que photos en taille normale), et en particulier sur les thumbs je constate que les 3/4 des thumbs sont affichés lorsque la petite image censée faire patienter apparait... (je viens encore de tester : sur 12 thumbs 11 étaient chargées avant la petite image, en tout cas lors du premier affichage de l'image...)

Maintenant il se peut que j'ai raté un truc...

[Dam06]

Alors voila, je suis passé sur Ajax avec la librairie Prototype.

La fonction Rafraichissement() est lancer au chargement de la plage.
A la demande de la requete Ajax, le CGI de mon serveur doit retourner un fichier XML contenant 6 données de type entier.

voici mon code Ajax:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script src="nouveau/Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="javascript" SRC="Ajax/prototype.js"></SCRIPT>
 
<SCRIPT TYPE="text/javascript">
        function Rafraichissement()
        {
                //Timer réglant la periode de rafraichissement
                setTimeout("Reception()", 5000);
        }
        
        function Reception()
        {
                var url = '/cgi-bin/horodatarc-web?req=supervision_info&sess=[APPLIWEB VAR="code_session"]';
                var RequeteAjax = new Ajax.Request(
                        url,
                        {
                                method: 'get',
                                onSuccess: Edition,
                                onFailure: Erreur
                        }
                );
        }
 
        function Edition(requete) {
                $('date').update(requete.date);
                $('ArchivageDebut').update(requete.ArchivageDebut);
                $('ArchivageFin').update(requete.ArchivageFin);
                $('ImpressionAtt').update(requete.ImpressionAtt);
                $('ImpressionDernier').update(requete.ImpressionDernier);
                $('ImpressionPage').update(requete.ImpressionPage);
        }
        
        function Erreur() {
                $('date').update('Erreur');     
                $('ArchivageDebut').update('Erreur');   
                $('ArchivageFin').update('Erreur');     
                $('ImpressionAtt').update('Erreur');            
                $('ImpressionDernier').update('Erreur');                
                $('ImpressionPage').update('Erreur');           
        }
</SCRIPT>

Mon probléme est que je n'arrive pas à créer un fichier XML qui marche.
Quelqu'un pourait-il me montrer un exemple ?