IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

G-spinner, déclencher animation de chargement de page


Sujet :

jQuery

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    181
    Détails du profil
    Informations personnelles :
    Localisation : France, Marne (Champagne Ardenne)

    Informations forums :
    Inscription : Juin 2006
    Messages : 181
    Par défaut G-spinner, déclencher animation de chargement de page
    Bonjour,

    Je souhaite mettre en place cette animation en cercle pour le chargement d'une page (temps de chargement suite à requete mysql).

    https://www.jqueryscript.net/loading...g-spinner.html

    var $loader = $("#loader");
    Start the loading indicator with .gSpinner():

    $loader.gSpinner();
    We can scale down the default size of the spinner by passing an options object where we specify the scale of the spinner relative to it's default size, 200x200px:

    Hide the loading indicator with .gSpinner("hide"):

    $loader.gSpinner("hide");
    Sur la démo, le déclenchement se fait via des boutons, mais je ne sais pas comment procéder pour créer un déclenchement en mettant l'appel en haut de la page et en bas de la page pour arrêter l'animation.

    Merci d'avance !
    Nicolas

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 509
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 509
    Par défaut
    pour que l’animation se déclenche au chargement de la page ajoute a la fin du fichier demo.js.

    pour le scroll :ajoute ce bout de code dans la partie script de la page index.html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    $(document).on('scroll',function(){
    	if(parseInt($(window).scrollTop()+$(window).height())==parseInt($(document).height())){
    	   console.log('fin de page scroll');
    	   handleStopClick();//stopper l'annimation
    	}else{
    		handleStartClick();//demarrer l'annimation
    	}
     
      });

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    181
    Détails du profil
    Informations personnelles :
    Localisation : France, Marne (Champagne Ardenne)

    Informations forums :
    Inscription : Juin 2006
    Messages : 181
    Par défaut
    Bonjour,

    merci Toufik , impeccable l'animation se lance automatiquement.

    Par contre je me suis mal exprimé, c'est quand la page est terminée d'être chargée que je souhaitais que l'animation s’arrête.

    C'est pour cela que je pensais qu'il fallait mettre une commande à la fin de la page pour l'arret.

    Merci d'avance

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 509
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 509
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $(document).ready(function(){
    //ici Le document est prêt, ton code devrai être ici
    });
    Tu peux utiliser setTimeout en intérne

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    181
    Détails du profil
    Informations personnelles :
    Localisation : France, Marne (Champagne Ardenne)

    Informations forums :
    Inscription : Juin 2006
    Messages : 181
    Par défaut
    Merci beaucoup ça fonctionne !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
      <script> 
    $(document).ready(function(){
     handleStopClick();
    });
     
     
        </script>

  6. #6
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 509
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 509
    Par défaut
    Il y'a mieux
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    $(document).ready(function(){
    handleStartClick();
    setTimeout(function(){
    handleStopClick();},10);
    });

  7. #7
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    181
    Détails du profil
    Informations personnelles :
    Localisation : France, Marne (Champagne Ardenne)

    Informations forums :
    Inscription : Juin 2006
    Messages : 181
    Par défaut
    merci !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 21/05/2013, 16h49
  2. [Stratégie] Animation de chargement pendant l'affichage des pages
    Par tibouchou dans le forum Développement Web en Java
    Réponses: 15
    Dernier message: 18/04/2007, 11h48
  3. [SWISH] Pb entre chargement de l'anim et chargement page
    Par auryn111 dans le forum EDI/Outils
    Réponses: 2
    Dernier message: 24/02/2006, 11h16
  4. Chargement de page trop long
    Par t_o_7_ dans le forum ASP
    Réponses: 2
    Dernier message: 19/09/2003, 18h58
  5. comment integer une animation swf dans une page
    Par naili dans le forum Intégration
    Réponses: 7
    Dernier message: 18/09/2002, 18h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo