Zend FR

gmifsud · 16-12-2010 14:43:34

Bonjour à tous,

Mon problème doit certainement être assez classique, mais je n'ai pas trouvé d'explication sur le net permettant d'arriver à ce que je cherche.

Tout d'abord, j'utilise le pattern MVC, et Jquery.
J'ai une vue avec une mosaïque de vignettes. Cette mosaïque est tout simplement contenue dans un div avec l'id="mosaique" .

J'utilise, dans mon contrôleur, la fonction Jquery : toggle.

Code:

        
$this->view->headScript('script','
    $(window).load(function() {
        $("#mosaique").delay(250).
            toggle("blind","",500);
    });
');

Problème, cela suppose que je mette le style="display: none;" à mon div par défaut, ce qui est inadmissible (si javascript est désactivé ou ne fonctionne pas, la mosaïque restera invisible).

J'ai bien entendu essayé de cacher la div par jQuery avant de lancer son apparition.
Le problème c'est qu'elle n'est pas rendue invisible tout de suite, on a le temps de la voir quelques instant, avant et c'est très moche. :-(

Ma question est multiple.

Tout d'abord : y a -t-il un moyen infaillible de cacher une div (ou autre élément) au chargement de la page ?

[EDIT : partie non résolue mais tant pis]
Et tant que j'y suis y aurait-il un didacticiel sur la façon d'afficher les vignettes de façon progressive, au fur et à mesure que la page les charge ?
Parce-que ce qui se passe en ce moment, c'est la séquence suivante :
- la div est cachée
- la page charge toutes les vignettes.
- la fonction toggle est lancée : elle attend les 250ms indiqués en paramètre du delay, puis affiche la div avec l'effet souhaité.

Bon, avec une cinquantaines de vignettes c'est déjà un peu long, mais il doit y en avoir 200 environ au final, ce qui devrait faire plusieurs secondes d'attente avant de voir quoi que ce soit apparaître, ce qui est beaucoup trop !

Je suis ouvert à tout conseil, sachant que j'ai "besoin" d'effets Ajax un minimum "cool".

Merci.

Dernière modification par gmifsud (21-12-2010 11:14:38)

Greg · 20-12-2010 15:53:20

Et avec la méthode jQuery.hide() qui devrait en principe appliquer ton display:none :

Code:

$this->view->headScript('script','
    $(window).load(function() {
        $("#mosaique").hide().delay(250).
            toggle("blind","",500);
    });
');

philippe · 20-12-2010 16:12:41

remplace ton window load par un document ready, ça t'évitera d'avoir les vignettes qui s'affichent puis qui s'effacent.
Ca t'évitera également d'attendre que toutes les vignettes soient chargées avant de lancer le JS.

Ca donne (avec la modif de Greg) :

Code:

    $(document).ready(function() {
        $("#mosaique").hide().delay(250).
            toggle("blind","",500);
    });

gmifsud · 21-12-2010 11:13:19

Merci beaucoup Greg et phillipe ! Cela fonctionne parfaitement.

Cela me permet aussi de voir que je n'ai pas compris comment fonctionnait javascript. J'étais persuadé que (document).ready() voulait dire : ne lancer la commande qu'une fois que le document est prêt, et donc pour moi, le hide() n'aurait été exécuté qu'après l'affichage des vignettes !
Or c'est totalement l'inverse qui se produit.

Bref, j'ai beaucoup à apprendre de ce côté là.

Merci encore.

omega2 · 08-01-2011 21:58:41

Une intervention bien tardive, mais :
- oui, "document.ready" veut dire quand le document est prêt.
- non, un document n'est pas l'ensemble des fichiers qui sont chargé par le navigateur.

En fait, "document.ready" veut juste dire, dans les grandes lignes, "quand le code html est chargé et que le navigateur a finis de l'analyser et de créer l'arborescence d'objet correspondante". Les images, le javascript, etc ne sont pas pris en compte dans le fonctionnement du "document.ready".

Zend FR

#1 16-12-2010 14:43:34

[RÉSOLU] Jquery : masquer pendant chargement ?

Code:

#2 20-12-2010 15:53:20

Re: [RÉSOLU] Jquery : masquer pendant chargement ?

Code:

#3 20-12-2010 16:12:41

Re: [RÉSOLU] Jquery : masquer pendant chargement ?

Code:

#4 21-12-2010 11:13:19

Re: [RÉSOLU] Jquery : masquer pendant chargement ?

#5 08-01-2011 21:58:41

Re: [RÉSOLU] Jquery : masquer pendant chargement ?

Pied de page des forums