Discussion :

[Prettyletter]

Bonjour,

Je viens vers vous car je bloque sur un script depuis quelques temps. Sur le site que je suis en train de réaliser, je gère le chargement des pages avec Ajax. Tout fonctionne à un détail près : lorsque je change de page, sa hauteur s'anime pour prendre progressivement la dimension de la nouvelle. Cela fonctionne parfaitement pour les pages où il n'y a que du texte, mais ça se complique dès qu'il y a quelques images car mon script n'a pas le temps de calculer la hauteur de la nouvelle page. Voici 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
28
29
30
31
32
33
34
35
36
if( $(this).attr('pageId') == "index" ) {
	// Fade Out sur le contenu
	$('footer').animate({opacity: 0}, 'slow');
	$('#content').animate({opacity: 0}, 'slow', function() {
		// On ramène la hauteur à 400px (taille minimale définie dans le CSS)
		$('#page').animate({height: 400}, 'slow', function() {	
			// On efface le contenu	
			$('#content').html('');
			// On charge le nouveau
			$.ajax({
				type: 'GET',
				url: 'include/news_feed.php',
				dataType: 'html',
				error: function(msg, string) {
					alert( "ERROR : " + string );
				},
				success: function(data) {
					$('#content').html(data);
 
					// Calcul des nouvelles dimensions de la page
					var page = $('#page'),
					curHeight = page.height(),
					autoHeight = page.css('height', 'auto').height();
 
					// On anime la taille avec la nouvelle valeur
					page.height(curHeight).animate({height: autoHeight}, 1000, function() {
						// On affiche le contenu
						$('#content').animate({opacity: 1}, 'slow');
						$('footer').animate({opacity: 1}, 'slow');
					});
				}
			});
			currentPageId = 'index';
		});
	});
}

J'avais trouvé une "solution" en utilisant setTimeout. En revanche, cette solution ne me plaît pas car les délais d'affichage ne sont pas du tout optimisés.
Ce que j'aimerais, c'est que la partie du code qui récupère la hauteur de la nouvelle page ne soit exécutée qu'une fois la page totalement chargée. J'ai pour cela essayé les différentes méthodes .done(), .load(), success ou encore complete, mais aucune n'a fonctionné.
Si vous avez une idée...

Merci pour votre aide !

[danielhagnoul]

Bonsoir

Je viens de tester un code qui semble fonctionner. Voir l'avertissement : http://api.jquery.com/load-event/.

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
 
$( "#btnID" ).on( "click", function(){
 
    /*
     * Cache la section qui va recevoir le fragment du DOM
     */
    $( "section.conteneur" ).fadeOut( 200, function(){
 
        /*
         * Charge un fragment HTML avec load()
         * 
         * La division d'ID "#mesImagesID" est incorporée
         * dans la section ayant la classe conteneur.
         */
        $( "section.conteneur" ).load( "dvp2.html #mesImagesID", function(){
 
            /*
             * Lorsque la dernière image est chargée rendre visible
             */
            $( ".conteneur img:last" ).on( "load",  function(){
                $( "section.conteneur" ).fadeIn( 200 );
            });
        });
 
    });    
});

[Prettyletter]

Bonjour et merci pour ta réponse,

Ce code ne fonctionne pas chez moi, et je pense que cela vient du fait que je n'ai pas compris comment utiliser #mesImagesID. Peux-tu m'expliquer ?

Je me penche actuellement sur une solution consistant à précharger les images avant d'afficher la page mais cela doit être fait au moment du clic sur l'onglet donc ce n'est pas gagné.

Sinon, en imaginant que chacune de mes images possède une hauteur fixe, pense-tu qu'il est possible de calculer la hauteur de la page sans que celles-ci soient chargées, mais en laissant l'espace libre pour qu'elles s'affichent une fois chargées ?

[danielhagnoul]

Bonsoir



Le code que je vous donne contient évidemment le nom des fichiers et des ID que j'ai utilisés dans ma page de test

"section.conteneur"
"dvp2.html #mesImagesID"

Dans ce code, je charge dans une "section" ayant la classe "conteneur" la division d'ID "mesImagesID" (cette division contient 12 images) qui se trouve dans la page "dvp2.html".

Pour tester ce code, vous devez bien entendu remplacer mes noms par les vôtres.

[Prettyletter]

Bonjour,

Bien sûr, j'avais compris qu'il s'agissait d'identifier les images dans cette partie du code. En revanche, cette page que j'inclus contient des images qui ne possèdent pas d'identifiant car celles-ci sont en nombre indéterminé au moment du chargement. Mon code est donc le suivant :

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
$('#content').animate({opacity: 0}, 'slow', function() {
	$('#page').animate({height: 400}, 'slow', function() {		
		$('#content').html('');
 
		$('#content').load('include/shop.php img', function() {
 
			$('#content img:last').on('load', function() {
				// Calcul des nouvelles dimensions de la page
				var page = $('#page'),
				curHeight = page.height(),
				autoHeight = page.css('height', 'auto').height();
 
				// On anime la taille avec la nouvelle valeur
				page.height(curHeight).animate({height: autoHeight}, 800, function() {
				// On affiche le contenu
				$('#content').animate({opacity: 1}, 'slow');
				$('footer').animate({opacity: 1}, 'slow');
			});	
		});
 
	});
 
	currentPageId = 'shop';
});
});

Dans mon cas, cela ne fonctionne pas. J'ai fait des tests au niveau du callback sur $('img:last').load et celle-ci n'est jamais appelée. jQuery ne détecte jamais l'évènement ici.


EDIT :
J'ai finalement trouvé où ça n'allait pas. La page "shop.php" que j'incluais contenait elle-même un appel Ajax pour afficher les images puisque celles-ci sont classées dans des catégories. Le fait d'avoir deux appels Ajax à la suite ne lui plaisait pas et j'ai réglé le problème en faisant autrement.
Merci pour ton aide !