Discussion :

[Supernem]

Bonjour à tous,

je suis actuellement en train de développer une sorte de portfolio avec beaucoup de galeries d'images. J'utilise de l'AJAX via JQuery pour charger dynamiquement ces images contenues dans divers fichiers HTML.

Une fois ces images chargées, un script "carrousel" s’exécute sur ces images. Malheureusement, les images ne sont complètement pas chargées et le script s' exécute trop tot.

J'aimerai que le chargement de ces images se finisse avant que le script se lance.

Voici un bout de mon code:

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
$(document).ready (function(){
	$("#menu a").click(function(e) {
		e.preventDefault();
		page = $(this).attr("href");
		$.ajax ({
			url: page,
			cache: false,
			success: function(html){
				afficher(html);
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
				alert (textStatus);
			}
		}) 
	}); 
});
 
function afficher(data){
	$("#content").fadeOut(500, function(){
		$("#content").empty();
		$("#content").append(data).fadeIn(1000);
		$.getScript('./js/jquery.carousel.min.js', function() {
			// Utilisation du carousel
			$("div.foo").carousel({ nextBtn: '<img src="./img/next.png" alt="next" />', prevBtn: '<img src="./img/previous.png" alt="next" />' });
		});
	});
}

J'ai réussi à faire l'équivalent en statique sans AJAX mais j'aimerai le rendre plus esthétique, d'où AJAX. Sauf si quelqu'un trouve une alternative.

Voici l'alternative en statique:

Code :

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

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
				$("#content").hide(); //on cache le contenu
				$("body").append('<div id="wait"><img src="../../img/loader.gif" alt="chargement..."/></div>');
				});
			// Utilisation du carousel
				$(window).load(function(){
					$("#wait").hide();
					$("#content").fadeIn(1500);
					$("div.foo").carousel({ dispItems: 2,  nextBtn: '<img src="../../img/next.png" alt="next" />', prevBtn: '<img src="../../img/previous.png" alt="next" />' });
				});

Merci d'avance, je bloque depuis pas mal de temps sur ce problème...

[Invité]

Bonjour,
=> jQuery.ajax()

en traitant Ajax en synchrone ?

Code :

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

1
2
3
		$.ajax ({
			async : false,
			// [...]

[Supernem]

Merci pour votre réponse rapide, je vais essayer de me renseigner sur votre proposition ou c'est une question ? xD

[Invité]

C'est à tester.
(mais une réponse est souhaitée : ça marche ou pas ?)

[Supernem]

Je suis actuellement en train de tester votre proposition. Je vous tiens au courant très prochainement. Merci encore

MAJ: Les images apparaissent en saccadées. Cela signifie qu'elles sont toujours en train de charger mais le script semble s'effectuer après ! :/


J'ai tenté de placer un loader en attendant que toutes les images chargent mais il disparaît aussitôt et les images ne sont pas complètement chargées...

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
$(document).ready (function(){
	$("#menu a").click(function(e) {
		e.preventDefault();
		page = $(this).attr("href");
 
		$.ajax ({
			url: page,
			cache: false,
			async: false,
			success: function(html){	
				$("body").append('<div id="wait"><img src="../../img/loader.gif" alt="chargement..."/></div>');
				afficher(html);
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
				alert (textStatus);
			}
		}) 
	}); 
});
 
function afficher(data){
	$("#content").fadeOut(500, function(){
		$("#content").empty();
		$("#content").append(data);
		$("#wait").hide();
		$("#content").fadeIn(1500);
		$.getScript('./js/jquery.carousel.min.js', function() {
			// Utilisation du carousel
			$("div.foo").carousel({ nextBtn: '<img src="./img/next.png" alt="next" />', prevBtn: '<img src="./img/previous.png" alt="next" />' });
		});
	});
}

[Supernem]

Donc à priori, cela ne semble pas marcher à moins que je sois dans l'erreur