11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JQuery chargement div

Bonjour à tous,

J'ai un souci dans l'utilisation de jQuery pour le chargement d'une DIV.
Voici le code javascript :
$(window).load(function() {
	$("#centre_contenu").hide();
	$("#loader").show();
	$("#centre_contenu").ready(function() {
		$("#loader").fadeOut(function() {
			$("#centre_contenu").fadeIn(1000);
		});
	});
});


Et le code php :
<div id="centre">
  	<span id="loader"><img src="images/loader.gif" border="0" alt="Chargement" title="Chargement" /> Chargement en cours</span>
    <div id="centre_contenu"> include("gestion_".$page.".php"); </div>
  </div>


Je dois avoir un problème d'utilisation des 'load' ou 'ready' je ne sais pas, mais j'ai des comportements bizar.
En fait, parfois la div "centre_contenu" s'affiche puis se masque. Le loader s'affiche puis la div "centre_contenu" se raffiche redisparait en même temps que le loader et enfin le fadeIn de la div se fait.

Le comportement que je cherche à avoir est le suivant :
- au chargement de la page la div "centre_contenu" est vide.
- affichage du loader pendant que la div "centre_contenu" se charge totalement
- une fois que la div "centre_contenu" est totalement chargée, le loader fait un fadeOut() et la div "centre_contenu" un fadeIn()

Une idée sur mon ou mes erreurs ?
Merci d'avance pour votre aide.
Modifié par TitBen (12 Apr 2010 - 15:01)
Bonjour

As-tu essayé d'utiliser l'évènement $(document).ready(function() plutôt que $(window).load(function() ?
Hello,
en effet il y a un problème d'évènements.

$(window).load correspond au chargement de tous les composants de la page, c'est pour ca que ton contenu s'affiche puis disparait.

$(document).ready est ce qu'il te faut : tu veux cacher ton contenu et afficher le loader dès que tu peux.

$("#centre_contenu").load ce déclenche lorsque les composants du contenu ont été téléchargés, c'est là que tu dois afficher le contenu.

Attention, pour les effets de jQuery, il y a deux paramètres optionnels : la vitesse et la fonction callback. Dans ton FadeOut, il faut que tu spécifie la vitesse car la fonction callback doit être le second argument.

Ca devrait fonctionner avec ca :


$(document).ready(function() {
    $("#centre_contenu").hide(); 
    $("#loader").show(); 
    $("#centre_contenu").load(function() {
        $("#loader").fadeOut('fast', function() { 
            $("#centre_contenu").fadeIn(1000); 
        }); 
    }); 
});

Modifié par Mathieu33 (02 Apr 2010 - 10:15)
Salut,

Merci pour le test ... mais avec cette solution, le loader reste afficher et rien d'autre ne se passe.
Le contenu ne s'affiche pas ...

Je recherche !!
Voici ce qui a l'air de fonctionner :

$(document).ready(function() {
	$("#centre_contenu").hide();
	$("#loader").show();
	$("#centre_contenu").ready(function() {
		$("#loader").fadeOut(function() {
			$("#centre_contenu").fadeIn(1000);
		});
	});
});


Par contre ... ça me "casse" d'autres bouts de code jquery ... je vais regarder ce qui cloche !

EDIT :
voici les éléments jquery qui buguent avec ce code :
- msDropdown (ici)
- fixer des éléments floatant (ici)

Je ne comprends pas pourquoi ... et vous ?? une idée ??
Modifié par TitBen (06 Apr 2010 - 13:19)
Je n'arrive pas à comprendre pourquoi si je fais ça :

$(document).ready(function() { 
    $("#centre_contenu").hide();  
    $("#loader").show();  
    $("#centre_contenu").load(function() { 
        $("#loader").fadeOut('fast', function() {  
            $("#centre_contenu").fadeIn(1000);  
        });  
    });  
});


le loader tourne en boucle et rien ne se passe.

Par contre si je fais :

$(document).ready(function() { 
    $("#centre_contenu").hide();  
    $("#loader").show();  
    $("#centre_contenu").ready(function() { 
        $("#loader").fadeOut('fast', function() {  
            $("#centre_contenu").fadeIn(1000);  
        });  
    });  
});


ça me casse d'autres bouts de code jQuery comme si ce n'était pas chargé comme il faut !

Une idée ??
Je bloque ... Smiley sweatdrop

Merci d'avance pour votre aide.

EDIT :

Comportement que je ne comprends pas (pouvez-vous m'éclairer ??)

Par exemple si j'ai le code javascript suivant :

$(window).load(function() { 
    $("#loader").show();  
    $("#centre_contenu").ready(function() { 
        $("#loader").fadeOut('fast', function() {  
            $("#centre_contenu").fadeIn(1000);  
        });  
    });  
});


#centre_contenu { display: none; }


ça me casse du code jQuery (pagination, dropdown ...)

Alors que si je mets ce code, ça ne me casse rien (mais le loading ne fonctionne pas correctement, comme expliqué dans mon premier message) :

$(window).load(function() { 
    $("#centre_contenu").hide();
    $("#loader").show();  
    $("#centre_contenu").ready(function() { 
        $("#loader").fadeOut('fast', function() {  
            $("#centre_contenu").fadeIn(1000);  
        });  
    });  
});


Je ne vois pas trop pourquoi ... une idée ??
Modifié par TitBen (09 Apr 2010 - 11:16)
Bon alors voilà la solution :

Dans la page index.php, voici le code jQuery :

$(document).ready(function() {
	$("#centre_contenu").hide();
	$("#loader").show();
	$("#centre_contenu").load("gestion_page.php", function(data) {
		$("#loader").fadeOut('fast', function() {
			$("#centre_contenu").fadeIn(1000);
			if (typeof(evenements) !== "undefined") {
                                evenements.init();
                        }
		});
	});
});


et le code html :
<div id="centre">
  	<span id="loader"><img src="images/loader.gif" border="0" alt="Chargement" title="Chargement" /> Chargement en cours</span>
    <div id="centre_contenu"></div>
  </div>


Dans la page gestion_page.php j'avais un souci de déclenchement d'évènement qui se faisait trop tôt pour détecter par exemple la position d'une DIV. C'est pour ça que j'ai rajouté :

if (typeof(evenements) !== "undefined") {
       evenements.init();
}


Et dans la page gestion_page.php :

$(document).ready(function(){
   [...]
});

var evenements = {
   init: function() {
      ici les fonctions qui vont s'exécuter APRES que toute la page soit chargée.
   }
}


Voilà ... si ça peut aider d'autres personnes ... Smiley cligne
Sujet clos
Aller à