Charger des images en memoire

Version imprimable

04/12/2008, 11h24
Mozofeuk

Charger des images en memoire

Tous d'abort bonjour a tous, voila j'ai realiser une application ASP.net C# qui permet de visionner une video d'une route prealablement selectionner sur une carte (API type GoogleMap).

Pour permettre au utilisateur de visionner la route j'ai realiser un pseudo "diaporama" qui diffuse les photos prise(a intervalle regulier) de la route suffisament vite pour avoir l'impression d'une video.( 8O tous le monde m'a compris ?)

En local il n'y avais aucun probleme, les photos se charger suffisament vite pour etre afficher, mais lors du deploiement sur le serveur, l'image met trop de temps a s'afficher ce qui fait que mon diaporama passe a l'image suivante sans que la precedente est put etre affiché.

Ma question est la suivante, est-il possible de charger une liste d'image en memoire sur le client ? Cela me permettrais de ne lancer la "video" qu'une fois que toutes les images (ou une partie) sont deja charger sur le client, permettant un affichage assez rapide des photo.

Merci de vos reponse, Cordialement Mozo
04/12/2008, 13h18
ThomasR

Bonjour,

cela relève plus d'un problème javascript que .Net, lorsque tu changes d'image tu fais un PostBack sur le serveur ?

SI oui il ne faudrait pas, il faudrait que tu envoie le rendu HTML de toutes tes images et que via Javascript tu changes le display des images pour passer de l'une à l'autre.

De cette manière il n'y a pas d'accès réseau ou de retour serveur à chaque demande d'image, elles sont déjà présente c'est juste leur style qui est modifié à la volée.

J'ai fait çà sur http://totems.bois.com en page d'accueil si tu veux voir le fonctionnement.

Justement il n'y a pas de postback a chaque changement d'image car sinon cela donne un effet flash assez desagreable.

C'est d'ailleur via javascript que j'effectue le changement d'image (il est vrai que j'aurai du le mentionner)

je met ma fonction javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function ChangeImage() { if (document.getElementById) { num = num + 1 document.getElementById('img').src = vid[num]; } if (stop != true) { setTimeout("ChangeImage()", 100); } }
mon tableau vid[] contient le chemin(en relatif) de toutes les images.

Le fait de changer dynamiquement la src fait faire à ton navigateur un appel réseau afin de récupérer le fichier sur le serveur. Certains navigateurs gardent quand meme en cache ces images changés dynamiquement. Ce n'est pas le cas de IE6.

Tu pourrais générer le code HTML de toutes tes images et jouer sur la propriété display avec javascript.

Un bref exemple :
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 <script type="text/javascript"> var imgs_count = 3; var num = 1; function ChangeImage() { if (document.getElementById) { document.getElementById('Img'+num).style.display = 'none'; num = (num == imgs_count) ? 1 : num + 1; document.getElementById('Img'+num).style.display = 'block'; } if (stop != true) { setTimeout("ChangeImage()", 1000); } } </script> <div id="Img1"> <img src="/images/limage1.jpeg" alt=""/> </div> <div id="Img2" style="display:none;"> <img src="/images/limage2.jpeg" alt=""/> </div> <div id="Img3" style="display:none;"> <img src="/images/limage3.jpeg" alt=""/> </div>
En gardant la meme technique tu peux faire en sorte que le tableau vid[] contiennent les ids des div à afficher / cacher.

L'utilisation de ces div peut te permettre d'implémenter facilement un fadeIn / fadeOut lors des transitions d'images, surtout si tu as du texte en plus des images... 'fin bref

04/12/2008, 16h28
Mozofeuk
Merci a toi Thomas, je n'avais pas penser a faire comme cela , au moins toutes les images seront charger des le load de la page c sa ?

Certain de mes logs(routes) font plus quelque centaine de photo donc j'ai besoin de creer dynamiquement des div contenant des images pour pouvoir faire apparaitre disparaitre les div.

J'ai fait comme cela pour creer mes div
Code:

1 2 var d = '<div id="' + numeroDiv + '" style="display:none;"><img src="' + chemin + '" />'; document.getElementById('vid').innerHTML = d;
Mais je n'arrive pas a les atteindre, jai toujour l'erreur :

"Erreur*: document.getElementById("a2") has no properties"

une idée ?

Merci encore thomas
04/12/2008, 16h37
lutecefalco

Vérifies que document.getElementById('vid') ne retournr pas null
04/12/2008, 16h42
Mozofeuk

"Vérifies que document.getElementById('vid') ne retournr pas null "

La div 'vid' est creer en dur comme ceci :

[CODE]<div id="vid"></div>[CODE]
04/12/2008, 16h53
lutecefalco

Oups, je parlais de document.getElementById("a2")
04/12/2008, 16h58
Mozofeuk
Code:

1 2 var d = '<div id="' + numeroDiv + '" style="display:none;"><img src="' + chemin + '" /></div>'; document.getElementById('vid').innerHTML = d;
Bon deja j'avais oublier de fermer la div :aie:

Mais cela ne marche toujours pas je n'arrive pas a la recuperer apres l'avoir creer
04/12/2008, 17h11
lutecefalco

t'es sûr que numeroDiv a la bonne valeur?
04/12/2008, 17h11
Mozofeuk

j'ai fais un

Code:

if (document.getElementById('a2') == null) { alert("qsdfqsdf")}

et l'alert ne se produit

merci de ton aide :king:
04/12/2008, 17h16
lutecefalco

fais un alert(document.getElementById('a2'))
04/12/2008, 17h17
Mozofeuk

8O il est null
04/12/2008, 17h20
lutecefalco

bon bah voilà

Sa ne m'eplique pas pourquoi, je le creer normalement en faisant
Code:

1 2 var d = '<div id="' + numeroDiv + '" style="display:none;"><img src="' + chemin + '" /></div>'; document.getElementById('vid').innerHTML = d;
jai verifier le "numeroDiv" est bon....

04/12/2008, 17h35
lutecefalco

Bah c'est crade ça.
Je pense pas que tu crées un objet div comme ça.
Tu remplies juste une div existante avec le code html d'une div.

Regarde ton code html généré et tu verras que ça peut pas marcher
04/12/2008, 17h42
Mozofeuk

Bon apres plusieur essai

Code:

alert(document.getElementById('a2'))

me donne null dés que ma div se trouve a l'interieur d'une autre div
04/12/2008, 17h54
lutecefalco

Citation:

Envoyé par Mozofeuk

Bon apres plusieur essai

Code:

alert(document.getElementById('a2'))

me donne null dés que ma div se trouve a l'interieur d'une autre div

C'est ce que je viens de t'expliquer
04/12/2008, 18h06
Mozofeuk

A oui escuse moi :aie:

Si tu a un autre moyen pour creer des div dynamiquement autre que celui la je suis preneur

Encore merci
04/12/2008, 18h11
lutecefalco

ici
05/12/2008, 09h29
Mozofeuk

:D j'adore :D

Merci a toi

Bon j'ai reussi a faire un truc qui fonctionne parfaitement en local, mais lorsque le site est deployer sur IIS cela ne fonctionne plus :

"Erreur*: document.getElementById(num) is null"

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
 
//Pour creer l'ensemble de mes dic contenant mes images
 
function addElement(ht,chemin) {
    var ni = document.getElementById('vid');
    var newdiv = document.createElement('div');
    var divIdName = ht ;
    newdiv.setAttribute('id', divIdName);
    if (document.all) { newdiv.style.setAttribute("cssText", "display:none;"); }
    else {newdiv.setAttribute("style", "display:none;");}
    newdiv.innerHTML = "<img src='" + chemin + "' alt='"+chemin+"'/>";
    ni.appendChild(newdiv);
 
}
 
//pour faire disparaitre une div et faire apparaitre la suivante
function ChangeImage() {
 
if (document.getElementById) {
    document.getElementById(num).style.display = 'none';
        num = num + 1;
        document.getElementById(num).style.display = 'block';
 
    }
    if (stop != true) {
        setTimeout("ChangeImage()", 100);
    }
}

pourtant en local il trouve bien mes div, je ne comprend pas, quelqu'un aurez une idée ??

Merci d'avance, Cordialement Mozo

09/12/2008, 17h19
lutecefalco

Est-ce que tu les vois les div dans le code html généré?

Et bien non je ne les voit pas quand je fait afficher source de la page :(.

En fait mes appels de la fonction addelement sont fait comme ceci (dans le aspx.cs):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
IdRoute = Convert.ToInt64(Request.Params["IdRue"]);
            BDDDataContext dc = new BDDDataContext();
 
            ClientScript.RegisterStartupScript(typeof(Page), "Nblog", "<script language=javascript>nbLog=" + IdRoute.ToString() + ";</script>");
 
 
            var ListImage = (from Image in dc.Images where Image.Log_id == IdRoute select Image.Image_id).ToList();
 
            int nbimage = 1;
            foreach (long ImageId in ListImage)
            {
                string laDiv = "<div id='img" + nbimage + "' style='display:none;'><img src='logs_image/+" + IdRoute.ToString() + "/" + nbimage + ".jpg' />;";
                ClientScript.RegisterStartupScript(typeof(Page), nbimage.ToString() + "Chemin", "<script language=javascript>chemin='logs_image/" + IdRoute.ToString() + "/" + ImageId + ".jpg'</script>");
                ClientScript.RegisterStartupScript(typeof(Page), nbimage.ToString() + "nombre", "<script language=javascript>ht='"+nbimage.ToString()+"'</script>");
                ClientScript.RegisterStartupScript(typeof(Page), nbimage.ToString() + "ListImageID", "<script language=javascript>addElement(ht,chemin);</script>");
                nbimage++;
            }
            ClientScript.RegisterStartupScript(typeof(Page), "NbImage", "<script language=javascript>nbImage=" + nbimage.ToString() + ";</script>");

lorsque je fait afficher source j'obtient ceci :

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
169
170
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1"><title>
	Video2
</title><link rel="stylesheet" media="screen" type="text/css" title="Design" href="video.css" />
    <script type="text/javascript">
        couv = new Array;
        var j =0;
        var stop=true;
        num = 1
        var i;
        var nbImage = 0;
        var nbLog = 0;
        var vid = new Array;
        var vidm = new Array;
        var Marquer = false;
        var ht;
        var chemin;
 
function addElement(ht,chemin) {
    var ni = document.getElementById('vid');
    var newdiv = document.createElement('div');
    var divIdName = ht ;
    newdiv.setAttribute('id', divIdName);
    if (document.all) { newdiv.style.setAttribute("cssText", "display:none;"); }
    else {newdiv.setAttribute("style", "display:none;");}
 
    newdiv.innerHTML = "<img src='" + chemin + "' alt='"+chemin+"'/>";
    ni.appendChild(newdiv);
 
}
 
 
function Charge() {
 
	    var d = '<div id="'+ht+'" style="display:none;" ></div>';
	    document.getElementById('vid').innerHTML = d;
	    document.getElementById(ht).innerHTML = '<img src="' + chemin + '" alt=""/>';
	    alert(document.getElementById(ht)+ht) 
 
	}
function ChangeImage() {
 
if (document.getElementById) {
    document.getElementById(num).style.display = 'none';
        num = num + 1;
        document.getElementById(num).style.display = 'block';
        //alert(document.getElementById(num) + num);
    }
    if (stop != true) {
        setTimeout("ChangeImage()", 100);
    }
}
 
function ChangeImageRetour() {
    if (document.getElementById) {
        document.getElementById(num).style.display = 'none';
        num = num - 1;
        document.getElementById(num).style.display = 'block';
 
    }
    if (stop != true) {
        setTimeout("ChangeImageRetour()", 100);
    }
}
 
function BtStop() {
    stop = true;
    document.getElementById('stop').disabled = true;
    document.getElementById('play').disabled = false;
    document.getElementById('arriere').disabled = false;
    document.getElementById('avance').disabled = false;
    document.getElementById('recule').disabled = false;
}
function BtPlay() {
    stop = false;
    ChangeImage();
    document.getElementById('play').disabled = true;
    document.getElementById('arriere').disabled = true;
    document.getElementById('stop').disabled = false;
    document.getElementById('avance').disabled = true;
    document.getElementById('recule').disabled = true;
}
function BtArriere() {
    stop = false;
    ChangeImageRetour();
    document.getElementById('arriere').disabled = true;
    document.getElementById('stop').disabled = false;
    document.getElementById('play').disabled = true;
    document.getElementById('avance').disabled = true;
    document.getElementById('recule').disabled = true;
}
function BtAvance() {
    stop = true;
    ChangeImage();
    document.getElementById('arriere').disabled = false;
    document.getElementById('stop').disabled = true;
    document.getElementById('play').disabled = false;
 
}
function BtRecule() {
    stop = true;
    ChangeImageRetour();
    document.getElementById('arriere').disabled = false;
    document.getElementById('stop').disabled = true;
    document.getElementById('play').disabled = false;
}
function Bt_Marquage_Click() {
    if (Marquer == true) { Marquer = false }
    else { Marquer = true }
    document.getElementById("d").value = Marquer.toString();
}
function Debut() {
    document.getElementById('arriere').disabled = true;
    document.getElementById('play').disabled = false;
    document.getElementById('recule').disabled = true;
    document.getElementById('avance').disabled = false;
    for (i = 1; i < nbImage; i++) {
        document.getElementById(i).style.display = 'none';
    }
    num = 1;
    document.getElementById(1).style.display = 'block';
 
 }
function Fin() {
    document.getElementById('play').disabled = true;
    document.getElementById('arriere').disabled = false;
    document.getElementById('recule').disabled = false;
    document.getElementById('avance').disabled = true;
    for (i = 1; i < nbImage; i++) {
    document.getElementById(i).style.display = 'none';
    }
    num = nbImage-1;
    document.getElementById(nbImage).style.display = 'block';
 
}
 
 
</script>
</head>
<body>
<center>
 
<div id="video">
<input type="text" id="t" />
<div id="vid" style="border:solid 3 px black;height:700;width:937;">
</div>
<br />
    <input class="vid" type="button" id="recule" value="Reculer d'une image" onclick="BtRecule();"/>
    <input class="vid" type="button" id="arriere" value="En arriere"  onclick="BtArriere();"/>
    <input class="vid" type="button" id="stop" value="stop" disabled="false" onclick="BtStop();"/>
    <input class="vid" type="button" id="play" value="En avant"  onclick="BtPlay();"/>
    <input class="vid" type="button" id="avance" value="Avancer d'une image" onclick="BtAvance();"  />
    <input class="vid" type="button" id="Retour_debut" value="Début"  onclick="Debut();" />
    <input class="vid" type="button" id="Retour_Fin" value="Fin"  onclick="Fin();" />
    <input type="button" id="Bt_Marquage" value="Visualiser les marquages" onclick="Bt_Marquage_Click();"/><input type="text" id="d" value=""/>
    </div>
</center>
    <form name="form2" method="post" action="video2.aspx?IdRue=20081022120114" id="form2">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE0MDkxNzYwNDNkZNT4bZvIp5B2At2+X9tB09fIDq24" />
</div>
 
 
 
<script language=javascript>nbLog=20081022120114;</script><script language=javascript>chemin='logs_image/20081022120114/1224669675413.jpg'</script><script language=javascript>ht='1'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669680453.jpg'</script><script language=javascript>ht='2'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669681858.jpg'</script><script language=javascript>ht='3'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669683014.jpg'</script><script language=javascript>ht='4'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669684006.jpg'</script><script language=javascript>ht='5'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669684956.jpg'</script><script language=javascript>ht='6'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669685824.jpg'</script><script language=javascript>ht='7'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669686568.jpg'</script><script language=javascript>ht='8'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669687270.jpg'</script><script language=javascript>ht='9'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669687972.jpg'</script><script language=javascript>ht='10'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669688675.jpg'</script><script language=javascript>ht='11'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669689418.jpg'</script><script language=javascript>ht='12'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669690245.jpg'</script><script language=javascript>ht='13'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669691112.jpg'</script><script language=javascript>ht='14'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669692063.jpg'</script><script language=javascript>ht='15'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669693013.jpg'</script><script language=javascript>ht='16'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669693963.jpg'</script><script language=javascript>ht='17'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>chemin='logs_image/20081022120114/1224669694831.jpg'</script><script language=javascript>ht='18'</script><script language=javascript>addElement(ht,chemin);</script><script language=javascript>nbImage=19;</script></form>
</body>

on voit dans le html generé qu'il effectue bien les appels de fonction addelement avec les bons parametres mais je ne voit pas les div qu'il aurait du generé dans la fonction addelement. Pourtant (en local seulement) j'arrive bien a recuperer ces div pour les apparaitre disparaitre.

10/12/2008, 14h13
Mozofeuk

Bon en fait je suis un gros boulet le probleme venez de IIS qui ne rafraichissez pas ma page aspx.cs (qui ne prennait donc pas en compte les modification que j'apportais).

J'ai quand meme était obliger de entierement redeployer le site sur IIS, car impossible de lui faire executer la nouvelle page, vider le cache du navigateur ne changeais rien autant que les pages internet temporaire stocker sur le server.

Le principal c que cela marche mtn, merci a tous