Charger des images en memoire

**Mozofeuk** · 04/12/2008, 11h24

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.(

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

**ThomasR** · 04/12/2008, 13h18

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.

**Mozofeuk** · 04/12/2008, 14h19

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 :

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

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.

**ThomasR** · 04/12/2008, 14h31

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 :

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

**Mozofeuk** · 04/12/2008, 16h28

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 :

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

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

**lutecefalco** · 04/12/2008, 16h37

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

**Mozofeuk** · 04/12/2008, 16h42

"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]

**lutecefalco** · 04/12/2008, 16h53

Oups, je parlais de document.getElementById("a2")

**Mozofeuk** · 04/12/2008, 16h58

Code :

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

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

Mais cela ne marche toujours pas je n'arrive pas a la recuperer apres l'avoir creer

**lutecefalco** · 04/12/2008, 17h11

t'es sûr que numeroDiv a la bonne valeur?

**Mozofeuk** · 04/12/2008, 17h11

j'ai fais un

Code :

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

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

et l'alert ne se produit

merci de ton aide

**lutecefalco** · 04/12/2008, 17h16

fais un alert(document.getElementById('a2'))

**Mozofeuk** · 04/12/2008, 17h17

il est null

**lutecefalco** · 04/12/2008, 17h20

bon bah voilà

**Mozofeuk** · 04/12/2008, 17h23

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

Code :

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

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....

**lutecefalco** · 04/12/2008, 17h35

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