[Résolu] Problème avec des évenements multiples?

Bonjour, malgré mes recherches, je n'ai rien trouvé me permettant de résoudre mon problème.

J'ai suivi le tutoriel d'Alsa pour mettre en place une galerie photos, jusque là, pas de problème, ça fonctionne très bien. La galerie s'affiche dans une popup sur un site d'annonces immobilières.

Un petit soucis cependant, si l'on clique sur une photo avant le chargement complet de toutes les vignettes, elle s'ouvre dans une page blanche.

Pour palier à cela, j'ai mis en place un pré chargement affichant un gif animé.

Le pré chargement fonctionne bien, mais une fois la page chargé, toutes les photos s'ouvrent dans une page blanche!

J'appelle dans le head de la popup les deux fichiers js (script_galerie.js et preload.js)

<script type="text/javascript" src="scripts/script_galerie.js"></script>
<script type="text/javascript" src="scripts/preload.js"></script>

Voici le code preload.js:

var speed = 10;
var transition = 10;

var GIFpreloadLargeur = 32;
var GIFpreloadHauteur = 32;

var timer= 0;
var opaciT = 100;

function opacity()
{
    opaciT = opaciT - transition;

    var object = document.getElementById('preloader').style;
    object.opacity = (opaciT / 100);
    object.MozOpacity = (opaciT / 100);
    object.KhtmlOpacity = (opaciT / 100);
    object.filter = "alpha(opacity=" + opaciT + ")";
       
        if (opaciT <= 0)
        {
                document.getElementById('preloader').style.visibility='hidden';
                clearInterval(timer);
        }

}
 
function preload()
{
        if (document.getElementById)
        {
                document.getElementById('preloadIMG').style.visibility='hidden';
                timer = setInterval("opacity()",speed);
        }
       
        else
        {
                if (document.layers)
                {       
                        document.preloadIMG.visibility = 'hidden';
                        timer = setInterval("opacity()",speed);
            }
                else
                {
                        document.all.preloadIMG.style.visibility = 'hidden';
                        timer = setInterval("opacity()",speed);
                }
        }
}

// GÉNÉRER LE CSS POUR LE PRELOADER
var myCSS;
myCSS = "<style type=\"text/css\">";

myCSS += "html, body { height:auto; margin:0px; padding:0px;}";

myCSS += "#preloader {";
myCSS += "position:fixed;";
myCSS += "background-color:white;";
myCSS += "width:100%;";
myCSS += "height:100%; ";
myCSS += "display:block;";
myCSS += "z-index:100000;";
myCSS += "}";

myCSS += "#preloadIMG {";
myCSS += "position:absolute;";
myCSS += "left:50%;";
myCSS += "width:" + GIFpreloadLargeur + "px;";
myCSS += "height:" + GIFpreloadHauteur + "px;";
myCSS += "margin-left:-" + (GIFpreloadLargeur / 2) + "px;";
myCSS += "top:150px;";
myCSS += "}";

myCSS += "</style>";

// ÉCRITURE DES CSS
window.document.write(myCSS);

// ÉXÉCUTION
window.onload = function() { preload(); }

Voici le code de script_galerie.js:

function displayPics()
{
	var photos = document.getElementById('galerie_mini') ;
	// On récupère l'élément ayant pour id galerie_mini

	var liens = photos.getElementsByTagName('a') ;
	// On récupère dans une variable tous les liens contenu dans galerie_mini

	var big_photo = document.getElementById('big_pict') ;
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	for (var i = 0 ; i < liens.length ; ++i) {
		// Au clic sur ces liens 
		liens[i].onclick = function() {
			big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_photo.alt = this.title; // On change son titre
			return false; // Et pour finir on inhibe l'action réelle du lien
		};
	}
}
window.onload = function(){

montre();displayPics();

}

J'ai remplacé dans ce fichier:

window.onload = displayPics;

par:

window.onload = function(){

montre();displayPics();

}

Comme je l'ai vu sur ce forum.

Malgré ça, le problème subsiste.
Je suppose que c'est dû au fait qu'il y ait plusieurs évènements au chargement de la page, mais je n'ai pas de solution.

Merci par avance pour votre aide.[/i]
Modifié par Beno (11 May 2007 - 12:18)

J'ai trouvé une piste sur un autre site qui indique de regrouper les deux "onLoad" en un. J'ai essayé, mais j'ai toujours le même problème...

J'ai trouvé la solution, j'ai regroupé les deux "onLoad" dans le fichier preload.js:

window.onload = function(){preload(); displayPics();}

Tu devrais utiliser l'autre solution que j'ai indiqué sur l'autre site, qui est plus pratique à l'usage.
Modifié par MacIntoc (11 May 2007 - 16:13)