Comment faire un effet 'loading' avant d'afficher le contenu avec mootools ?

[Mushr00m]

Bonjour,

Je suis en train de créer un module pour un client, ce module affiche des images traité via Mootools (grayscale, création de balise supplémentaire, etc). Le truc c'est que cela prend quelques secondes de traitement et je voudrais afficher une image de loading (gif animé que j'ai déjà) et quand le chargement est fini afficher le contenu et faire disparaitre le gif.

Donc pour le concept d'apparition/disparition je n'ai pas de soucis, le problème est de savoir comment le faire dès que le contenu est bien chargé, que le scrypt à bien fini quoi. Une sorte de OnComplete mais je ne sais pas trop comment faire.

Si un dev mootools en saurait plus à ce sujet ? Je suis sous Joomla 2.5 avec la version intégré de mootools et mootools-more.

Merci beaucoup

[ghazal]

Re : Comment faire un effet 'loading' avant d'afficher le contenu avec mootools ?

Salut,
est-ce que ceci t'aiderait ?

http://jsfiddle.net/ghazal/KGNvu/2

Plus complet, avec onRequest, onComplete, onSuccess et un click

http://jsfiddle.net/ghazal/5zxVe/

spinner mootools activé -> regarde la source ("view generated source " avec webdeveloper) une fois le bouton cliqué.
Avec: http://jsfiddle.net/ghazal/5zxVe/show

PS : css pourries, à modifier

OU
tu peux t'inspirer de ce widget de la forge

http://mootools.net/forge/p/lateloader

[Mushr00m]

Re : Comment faire un effet 'loading' avant d'afficher le contenu avec mootools ?

Merci pour ta réponse, le premier lien est mort par contre.

J'ai parcouru ton code et je ne comprend pas trop comment utilisé les OnComplete, OnSuccess, etc

Je vais continuer de regarder un peu ça...

[ghazal]

Re : Comment faire un effet 'loading' avant d'afficher le contenu avec mootools ?

Merci pour ta réponse, le premier lien est mort par contre.

... duh ... ? probablement un copier-coller foireux.

http://jsfiddle.net/ghazal/pZ54v/

En plus, c'est idiot, il y a une sorte de progression dans ce que je montrais.
Cette démo, assez basique, les deux autres, plus complexes.

+ j'ai fait 2 exemples avec onSuccess et Request.HTML vs Request

http://jsfiddle.net/ghazal/cKJ5X/

http://jsfiddle.net/ghazal/cKJ5X/2/

+ Un exemple avec
onRequest, onComplete, onSuccess, onFailure

http://fiddle.jshell.net/ghazal/RWwUW/

+ toutes les références
MooTools Docs - Request/Request

http://mootools.net/docs/core/Request/Request

MooTools Docs - Interface/Spinner

http://mootools.net/docs/more/Interface/Spinner