Bon, j'en chie pas mal avec le js (en fait, pour être exact, j'en chie pas mal avec le js et la compatibilité avec IE8
)Pour faire simple :
J'ai une fonction appelée une fois que mon corps de document est chargé (faisons ça proprement).
Dans cette fonction, j'ai besoin de précharger n images pour faire des calculs qui doivent me permettre de précalculer des mises à l'échelle de zones cliquables affectées à ces images, en fonction de l'environnement (mes zones cliquables sont définies pour les images non redimensionnées).
J'ai vite rencontré des problèmes parce que je devais temporiser le redimensionnement des maps/areas pour qu'il n'arrive pas avant le chargement des images. Du coup, j'ai un événement qui se lance à chaque fois qu'une image est chargée et qui redimensionne alors mes maps/areas.
Petit problème : avec IE8, j'ai une erreur js qui me dit que ce que je veux lancer sur le onload est "non implémenté". En fait, j'ai clairement l'impression qu'il n'arrive pas à comprendre la syntaxe qui permet de résoudre les résolutions de portées de variables machin.onload = (function () { monCode; })(mes, variables). Si je remplace ça par machin.onload = function () { alert('bidule'); }, ça marche bien.
Voici le bout de code en question :
function resizeAreas()
{
var allMaps = document.getElementsByTagName("map");
var izMax = allMaps.length;
var my_img = new Array();
for(var iz=0;iz<izMax;iz++)
{
var mycurrentAreas = allMaps[iz].areas;
var ozMax = mycurrentAreas.length;
my_img[iz] = document.createElement("IMG");
my_img[iz].id = "preload_img"+allMaps[iz].id;
my_img[iz].style.visibility="hidden";
my_img[iz].style.maxHeight="350px";
my_img[iz].style.position="absolute";
my_img[iz].style.top="0";
my_img[iz].style.left="0";
//Le +'?'+Math.random(); permet d'éviter qu'IE7 & 8 ne se basent sur les données en cache, ce qui fait que le onload sur l'image n'est jamais enclanché
my_img[iz].src="./maps/"+allMaps[iz].id.substring(4)+".png"+'?'+Math.random();
//Permet de s'assurer du bon chargement de l'image, sinon l'opération peut aller tellement vite que l'image n'est pas chargée, donc que rien ne se passe comme il faut (mauvais calcul de coordonnées)
my_img[iz].useMap = "#"+allMaps[iz].id;
document.body.appendChild(my_img[iz]);
var resizer = function(in_ozMax, in_allMaps, in_iz, in_mycurrentAreas) {
my_img[in_iz].useMap = "#"+allMaps[iz].id;
for (var oz=0; oz<in_ozMax; oz++)
{
resizeCoords(in_mycurrentAreas[oz].id, "preload_img"+in_allMaps[in_iz].id);
}
//On ne va pas garder dans le DOM quelque chose d'inutile...
document.body.removeChild(document.getElementById("preload_img"+in_allMaps[in_iz].id));
}
//my_img.onload = resizer(ozMax, allMaps, iz, mycurrentAreas);
document.getElementById("preload_img"+allMaps[iz].id).onload = (function() { resizer(ozMax, allMaps, iz, mycurrentAreas); })(ozMax, allMaps, iz, mycurrentAreas);
}
}Note : ça ne fonctionne pas non plus ni avec
my_img.onload = resizer(ozMax, allMaps, iz, mycurrentAreas);
ni avec
document.getElementById("preload_img"+allMaps[iz].id).onload = = resizer(ozMax, allMaps, iz, mycurrentAreas);
Alors que ça fonctionne bien avec Fx. Mais notre parc est encore en majorité sous XP+IE8 (même si ça évolue progressivement), du coup je suis bien emmerdé.
)
