bonjour a tous.

Voila je suis avec un ami l'auteur d'un site web de type ogame et tribal wars.
Dans le cadre de ce site web j'ai du créer un script Javascript qui me permet d'afficher une carte des villages des joueurs présent sur le site.

L'exemple se trouve ici http://dimention.eu/test_map.php

Le problème est que je je doit recharger la carte si le joueur defile trop loin. Mais comme vous pouvez le constater il faut attendre un certain temps avant que l'image ne s'affiche. Donc je me demander si il serait possible de précharger l'image avant pour que l'affichage se fasse instantanément

Voici ma fonction qui gérer le défilement et le rechargement de l'image(celle ci est géré grace a la librairie GD 2 de php)

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
 
function defil_map()
{
	//si on a activer le defilement de la carte
	if(auto_defil==1)
	{
		//on rapelle une fois la fonction
		setTimeout("defil_map()",10);
		//l'image est mise dans un overflow de  440px sur b 440px et l'image complete fait 440*3 px
		coord_X_img=document.getElementById("map").style.marginLeft;
		coord_Y_img=document.getElementById("map").style.marginTop;
		//on regarde dans quel sens tourner
		switch (sens_defil)
		{
			default:
				//si notre marginLeft est inferieur a  -40 px
				// qui represente les limite de notre defilement
				if(parseInt(coord_X_img)>=-40)
				{
					//on regarde a partire de quel coorodner recharger l'image php
					coord_X_taper-=15
					//puis on recharge l'image
					document.getElementById("load_map").src="image_map.php?X="+coord_X_taper+"&Y="+coord_Y_taper;
					//et on la recentre
					document.getElementById("map").style.marginLeft=-440;
					break;
				}
				document.getElementById("map").style.marginLeft=parseInt(coord_X_img)+2;
			break;
			case "droite":
				if(parseInt(coord_X_img)<=-840)
				{
					coord_X_taper+=15
					document.getElementById("load_map").src="image_map.php?X="+coord_X_taper+"&Y="+coord_Y_taper;
					document.getElementById("map").style.marginLeft=-440;
					break;
				}
				document.getElementById("map").style.marginLeft=parseInt(coord_X_img)-2;
			break;
			case "haut":
				if(parseInt(coord_Y_img)>=-40)
				{
					coord_Y_taper-=15
					document.getElementById("load_map").src="image_map.php?X="+coord_X_taper+"&Y="+coord_Y_taper;
					document.getElementById("map").style.marginTop=-440;
					break;
				}
				document.getElementById("map").style.marginTop=parseInt(coord_Y_img)+2;
			break;
			case "bas":
				if(parseInt(coord_Y_img)<=-840)
				{
					coord_Y_taper+=15
					document.getElementById("load_map").src="image_map.php?X="+coord_X_taper+"&Y="+coord_Y_taper;
					document.getElementById("map").style.marginTop=-440;
					break;
				}
				document.getElementById("map").style.marginTop=parseInt(coord_Y_img)-2;
			break;
		}
	}
}
Je remercie d'avance toutes les personnes qui m'aiderons
Cordialement Neoxen