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

JavaScript Discussion :

[AJAX] Affichage d'une icône chargement en cours


Sujet :

JavaScript

  1. #1
    Membre éclairé
    Inscrit en
    Novembre 2003
    Messages
    533
    Détails du profil
    Informations personnelles :
    Âge : 38

    Informations forums :
    Inscription : Novembre 2003
    Messages : 533
    Par défaut [AJAX] Affichage d'une icône chargement en cours
    Bonjour,

    J'ai une petite question, je souhaiterais afficher une icone chargement en cours dans un script ajax, mais je sais pas trop comment faire, est-ce que quelqu'un pourrait me donner un petit coup de main?

    Voici mon code

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
     
    <script type='text/JavaScript'>
    	function getXhr(){
    		var xhr = null; 
    		if(window.XMLHttpRequest) // Firefox et autres
    			{
    		   xhr = new XMLHttpRequest(); 
    		   }
    		else if(window.ActiveXObject){ // Internet Explorer 
    		   try {
    					xhr = new ActiveXObject("Msxml2.XMLHTTP");
    				} catch (e) {
    					xhr = new ActiveXObject("Microsoft.XMLHTTP");
    				}
    		}
    		else { // XMLHttpRequest non supporté par le navigateur 
    		   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    		   xhr = false; 
    		} 
    		return xhr
    	}
     
    	/**
    	* Méthode qui sera appelée sur le click du bouton
    	*/
    	function go(variable){
    		var xhr = getXhr()
    		// On défini ce qu'on va faire quand on aura la réponse
    		xhr.onreadystatechange = function(){
     
    			// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    			if(xhr.readyState == 4 && xhr.status == 200)
    				{
    				document.getElementById('image').innerHTML = xhr.responseText;
    				}
    		}
    		xhr.open("GET","./pages/chargement_album.php?"+variable,true);
    		xhr.send(null);
    	}
    go()
    </script>
    <div id="image">
    </div>
    merci d'avance infiniment pour votre aide

  2. #2
    Membre habitué
    Inscrit en
    Janvier 2007
    Messages
    11
    Détails du profil
    Informations forums :
    Inscription : Janvier 2007
    Messages : 11
    Par défaut
    quand status = 3 tu rempli ton div avec ce que tu veux.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    xhr.onreadystatechange = function(){
     
      if(xhr.readyState == 3) {.
        document.getElementById('image').innerHTML = "Loading";
      }	
      else if(xhr.readyState == 4 && xhr.status == 200)
      {
        document.getElementById('image').innerHTML = xhr.responseText;
      }
    }

  3. #3
    Membre éclairé
    Inscrit en
    Novembre 2003
    Messages
    533
    Détails du profil
    Informations personnelles :
    Âge : 38

    Informations forums :
    Inscription : Novembre 2003
    Messages : 533
    Par défaut
    Merci bien pour ta réponse, mais maintenant j'aurais une petite question, car mon script ajax va rechercher un page ou il y a à chaque fois environ 30 photos qui s'affiche, comment pourrais-je faire pour que tout le temps que l'explorer n'a pas télécharger les photos, qu'il y ait le logo chargement en cours?

    Merci d'avance pour vos précieuse réponse

  4. #4
    Membre éclairé
    Inscrit en
    Novembre 2003
    Messages
    533
    Détails du profil
    Informations personnelles :
    Âge : 38

    Informations forums :
    Inscription : Novembre 2003
    Messages : 533
    Par défaut
    UP

  5. #5
    Candidat au Club
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 3
    Par défaut
    dans ta page php qui affiche tes photos:

    un <div id="preload">Image de chargement</div>

    et un <div id="photos">Image Image Image Image</div>

    dans une fonction onLoad, tu pourrais

    cacher le div photos.
    preloader toutes les images.
    cacher le div preload.
    afficher le div photos.

    A tester...

    Pour bien te former: Cours et tutoriels pour apprendre JavaScript


    GS

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

Discussions similaires

  1. Réponses: 1
    Dernier message: 31/10/2014, 18h05
  2. [AJAX] Affichage d'une image
    Par captainflex dans le forum Ruby on Rails
    Réponses: 4
    Dernier message: 09/05/2009, 13h01
  3. Afficher une JFrame "Chargement en cours.." par dessus une autre JFrame ?
    Par Icefire dans le forum Agents de placement/Fenêtres
    Réponses: 3
    Dernier message: 22/02/2008, 22h20
  4. [2.0] Affichage d'une page en cours de chargement
    Par annalady dans le forum ASP.NET
    Réponses: 1
    Dernier message: 08/08/2007, 17h30
  5. [Python] Chargement et affichage d'une image
    Par Corpio dans le forum OpenGL
    Réponses: 10
    Dernier message: 13/04/2006, 17h35

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