JQuery load et rechargement de page

Bonjour,

J'ai créé une liste de film qui, lorsqu'on clique sur un film, va afficher dans un bloc certaines informations ainsi que 3 images.
J'ai utilisé jQuery, et tout fonctionnant bien, j'ai décidé de rajouter quelques effets d'animation afin de rendre l'ensemble plus harmonieux.
J'ai donc rajouté une fonction load() qui précharge les images puis show() qui les affiche une fois chargées.

Mon problème est que lorsque j'arrive pour la première fois sur mon site cela fonctionne très bien, mais si je recharge la page en cliquant sur "accueil" les images ne s'affichent plus.
J'ai l'impression que le javascript ne lance plus la fonction show()...

Voici les deux fonctions que j'utilise :

$(function() {	// Remplace les infos du film affiché par celui qui a été cliqué dans le bloc fiche_film
	jQuery.ajaxSetup ({
	'beforeSend' : function(xhr) {
	xhr.overrideMimeType('text/html; charset=iso-8859-1');
	}
	});
	$("#images_autres_films > a > img").click(function() {
		$('#grande_image').hide();
		$('#image_moyenne1').hide();
		$('#image_moyenne2').hide();
		$('#image_moyenne3').hide();
		var nomFilm = $(this).attr("alt");
		$.post("afficher_film.php", { film: nomFilm },
		function success(data){
			$(".titre_film").html(data.titre);
			$(".synopsis_film").html(data.synopsys);
			$(".image_grande > img").attr("src",data.photo3);
			$("#image_moyenne1").attr("src",data.photo1);
			$("#image_moyenne2").attr("src",data.photo2);
			$("#image_moyenne3").attr("src",data.photo3);
		},"json");
	});
});

$(function() {	// Préchargement des images
	$('#grande_image').hide();
	$('#image_moyenne1').hide();
	$('#image_moyenne2').hide();
	$('#image_moyenne3').hide();
	$('#grande_image').load(function () {
		$('#grande_image').show(200);
	});
	$('#image_moyenne1').load(function () {
		$('#image_moyenne1').show(200);
	});
	$('#image_moyenne2').load(function () {
		$('#image_moyenne2').show(200);
	});
	$('#image_moyenne3').load(function () {
		$('#image_moyenne3').show(200);
	});	
});

Vous pouvez voir le fonctionnement à cette adresse.

Je vous remercie d'avance pour toute l'aide que vous pourrez m'apporter car je m'arrache les cheveux
Modifié par Norfou (15 Jan 2010 - 15:08)

Salut,

Il faudrait vraiment que t'apprennes à utilisé les sélecteurs multiple en css : la virgule...

Ce code hyper verbeux

    $('#grande_image').hide(); 
    $('#image_moyenne1').hide(); 
    $('#image_moyenne2').hide(); 
    $('#image_moyenne3').hide(); 
    $('#grande_image').load(function () { 
        $('#grande_image').show(200); 
    }); 
    $('#image_moyenne1').load(function () { 
        $('#image_moyenne1').show(200); 
    }); 
    $('#image_moyenne2').load(function () { 
        $('#image_moyenne2').show(200); 
    }); 
    $('#image_moyenne3').load(function () { 
        $('#image_moyenne3').show(200); 
    });     

Devient :

    $('#grande_image,#image_moyenne1,#image_moyenne2,#image_moyenne3')
    .hide()
    .load(function () { 
        $(this).show(200); 
    });

Méthode que tu peux appliquer au 1er script


Concernant le sujet du post, j'ai une solution mais je ne sais si elle marche sur tous les navigateurs...

	$("#grande_image,#image_moyenne1,#image_moyenne2,#image_moyenne3").hide(function(){
		$this = $(this);
		//si l'image est déjà charger, on l'affiche
		if ($this.attr("complete"))
			$this.show(2000);
		else
		//sinon on l'affiche quand elle est charger
			$this.load(function(){
				$this.show(2000);
			});
	});