refresh d'une image

Version imprimable

21/10/2013, 13h35
steph_1

refresh d'une image

Bonjour,

Je fais un refresh (toutes les 10s) d'une image qui se trouve sur une page html.
Cette image se trouve sur la 1ère partie de la page (on va dire le haut de page). Sur la 2ème partie de page (bas de page) se trouvent d'autres images non rafraîchies.
Le refresh de ma 1ère image marche bien, mais j'ai tout de même un problème : si le scrollbar vertical se trouve sur le bas de page, celui-ci est automatiquement remit en haut sur le refresh de la 1ère image.

Comment faire pour qu'il n'y est pas d'impact sur le scrollbar vertical ?

Merci
21/10/2013, 14h01
hackoofr

:salut:
Postez votre code et :tagcode: :merci:

scuzi ;-)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
...
setInterval(fonctionReloadTableau, 10000);
 
function fonctionReloadTableau()
{
	var xhr = getXMLHttpRequest();
	xhr.onreadystatechange = function()
	{
		var newlistImg = xhr.responseText;		
		var ancienne_mypix_length = mypix.length;
		var ancien_index = thispic;
 
		//traitement de newlistImg pour màj tableau
		mypix = newlistImg.split(",")
 
		//recalcul de l'index
		var thispic_new = thispic + (mypix.length -   ancienne_mypix_length);
 
		// maj avec la dernière image du tableau d'images
		document.getElementById("image1").src= mypix[0];	
	}
	xhr.open("GET", "/cgi-bin/XXXXX.exe", true);
	xhr.send(null);
}

Code:

1
2
3
4
<body onload="fonctionReloadTableau()">
...
</body>
</html>

Toutes les 10s fonctionReloadTableau() est appelé.

L'image1 (en haut de ma page) est màj : document.getElementById("image1").src= mypix[0];.

C'est ce refresh de image1 qui me remet le scrollbar tout en haut.

21/10/2013, 17h40
sk8matt

Bonjour,

Sur quel navigateur exécute tu ton code ?

Tu devrais peut être enlever l'exécution de ta méthode js de ton onload() du body. Et laisser ton code js tel quel.

Théoriquement ta page ne devrais pas se recharger. A mon avis d'autre fonction doivent refresh ta page. C'est tout ce que tu as sur ta page ?

je suis avec firefox.

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="none">
 
<style>
body
{ 
    margin: 64px; 
    margin-top:0;
    font-size:100%;
    font-family: arial, sans;
    background-color: #FFF;
}
</style>
 
<script type='text/javascript'>
var num=1;     // numéro du fichier courant
var min=1;     // nombre minimum de fichiers
var max=5000;  // nombre maximum de fichiers
var extension = '.jpg';
var mypix=new Array();
var thispic = 0;
var thispic_temp = 0;
 
/* fonction qui permet d'afficher l'image */
function Affich() 
{
	document.getElementById("image1").src= mypix[0];
	Affich2(0);
}
 
function Affich2(num_img) 
{
	document.getElementById("image2").src= mypix[num_img];
	document.getElementById("image2").title= mypix[num_img];
	document.getElementById("name_img").value= mypix[num_img];
 
	/* au moins 2 images reçues */
	if(mypix.length > 1)
	{
		Prev_img3();
		Next_img4();
	}
}
 
/* fonction qui permet de revenir à l'image précédente */
function Prev() 
{
    if(thispic==0){
        thispic=mypix.length;
    }
    thispic--;
	Affich2(thispic); 
    return false;
}
 
/* fonction qui permet d'aller à l'image suivante */
function Next() 
{
    thispic++;
    if(thispic==mypix.length){
        thispic=0;
    }
    Affich2(thispic);
    return false;
}
 
/* Gestion des images en miniatures */
function Prev_img3() 
{
    thispic_temp = thispic;
    if(thispic_temp==0){
        thispic_temp=mypix.length;
    }
    thispic_temp--;
	document.getElementById("image3").src= mypix[thispic_temp];
    return false;
}
 
function Next_img4() 
{
    thispic_temp = thispic;
    thispic_temp++;
    if(thispic_temp==mypix.length){
        thispic_temp=0;
    }
    document.getElementById("image4").src= mypix[thispic_temp];
    return false;
}
 
function getXMLHttpRequest() {
    var xhr = null;
 
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest();
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
 
    return xhr;
}
 
setInterval(fonctionReloadTableau, 10000);
 
function fonctionReloadTableau()
{
	var xhr = getXMLHttpRequest();
	xhr.onreadystatechange = function()
	{
		var newlistImg = xhr.responseText;		
		var ancienne_mypix_length = mypix.length;
		var ancien_index = thispic;
 
		//traitement de newlistImg pour màj tableau
		mypix = newlistImg.split(",")
 
		//recalcul de l'index
		var thispic_new = thispic + (mypix.length - ancienne_mypix_length);
		Affich2(thispic_new);
 
		// maj de la dernière image.
		document.getElementById("image1").src= mypix[0];
	}
	xhr.open("GET", "/cgi-bin/xxxxx.exe", true);
	xhr.send(null);
}
 
</script>
 
</head>
 
<body onload="fonctionReloadTableau()">
<div id="scroll">
	<HR align=center size=6 width="100%" color="1B35A8">
	<br><br>
	<div align="left">
		<b>Visualisation image1:</b> <img id="image1" name="image1" src="" height="350" width="450" align="center">
	</div> 
	<br><br>
	<HR align=center size=6 width="100%" color="1B35A8">
	<br><br>
	<div align="left">
		<b>Visualisation archives:</b> <input type="text" size="60" p style="font-family: arial;font-size: 15px;background-color: #C0C0C0;" name="name_img" id="name_img" readonly>
		<br><br>
		<img id="image3" src="" height="50" width="50" align="center" hspace=50px>
		<input type="button" p style="font-family: arial;font-size: 35px" name="prec" value="<" onclick="Prev()">   
		<img id="image2" src="" height="350" width="450" align="center" hspace=50px value="">	
		<input type="button" p style="font-family: arial;font-size: 35px" name="suiv" value=">" onclick="Next()">  
		<img id="image4" src="" height="50" width="50" align="center" hspace=50px>
	</div> 
	<br><br>
	<div align="center">
		<b>Cliquez <a href="img_jpg/" name="datafile">ici</a> pour sélectionner une image dans la base de données.</b> 		   
	</div>	
</div>
</body>
</html>

La méthode onload du body est nécessaire pour rafraîchir automatiquement mon image1.
Je n'ai pas trouvé autre chose pour faire juste ce refresh automatiquement.

22/10/2013, 09h47
sk8matt

Tu n'a pas besoin d’exécuter ta méthode au onload du body.

setInterval(fonctionReloadTableau, 10000);

Cette instruction dans ton JS te permet d’exécuter la méthode à intervalle régulier. Tu n'as pas besoin d'initialiser le démarrage ce dernier ce fait tout seul.

Je te conseille d'essayer sans l'appel dans le onload du body. Au chargement de ta page la photo change déjà une fois.

En tout cas j'ai testé ton code et je n'ai pas de soucis a faire ce que tu veux.

Tiens nous au courant
22/10/2013, 09h58
steph_1
bon j'ai trouvé la solution lol

Je me suis créé une class:
Code:

1 2 3 4 .imgnav{ height:350px; }
Je définis mes 2 <DIV> des images en y rajoutant cette class.
Du coup je n'ai plus ce resize d'image qui provoque la remontée du scrollbar.

voili voilou
22/10/2013, 10h09
hackoofr

:salut:
Si vous pouvez nous poster la solution du code en entier, car je suis aussi intéressé :merci:
22/10/2013, 10h23
SpaceFrog

c'est juste que le temps de chargement de l'image, les balises img n'ayant pas encore de height cela provoque le rétrécissement du conteneur et donc un scroll ...
Fixer le height des images ou des conteneurs solutionne le problème