Bonjour à tous,

J'ai un souci dans l'utilisation de jQuery pour le chargement d'une DIV.
Voici le code javascript :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
$(window).load(function() { 
    $("#centre_contenu").hide(); 
    $("#loader").show(); 
    $("#centre_contenu").ready(function() { 
        $("#loader").fadeOut(function() { 
            $("#centre_contenu").fadeIn(1000); 
        }); 
    }); 
});
Et le code PHP
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<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()

Si je fais ça :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
$(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 :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
$(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 ... sweatdrop

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

Par exemple si j'ai le code javascript suivant :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
$(window).load(function() {  
    $("#loader").show();   
    $("#centre_contenu").ready(function() {  
        $("#loader").fadeOut('fast', function() {   
            $("#centre_contenu").fadeIn(1000);   
        });   
    });   
});
Et le code CSS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
#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) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
$(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 ??

Je sèche complètement ... si quelqu'un pouvait m'éclairer ça serait bien sympa.
Merci d'avance pour votre aide.