[Prototype] Patienter durant chargement complet d'une image (AJAX) [Résolu]

[Sebastos]

Salut à tous,

ALors voilà, je débute en AJAX, mais je connais bien le PHP... Aucun rapport me direz-vous, et c'est pas faux.

Je suis en train de faire une gallerie photo en PHP et je souhaiterais y inclure de l'AJAX pour certains traitements.

Exemple, lorsqu'on affiche une photo, la page doit vérifier que l'image redimentionnée (800*600 par exemple) existe. Si elle existe, elle l'affiche, sinon elle la créée et l'affiche.

Etant donné que le temps de création ou même des fois de temps d'affichage est "long" (pas 10 secondes non plus ), je souhaiterais que ma page se charge en entier, et que l'endroit ou doit apparaitre l'image affiche un gif animé (genre : ) permettant de patienter et ensuite laisse place à la photo chargée...

Cela sera aussi super utilise lors des modifications d'images (rotation, redimentionnement ...) pour éviter de recharger les pages en entier.

J'ai trouvé ça http://www.un-programmeur-php.ca/articles/ajax.php
mais le truc c'est que ce scipt affiche l'iamge dés que la page est dispo, et pas forcement si elle complétement chargée ...

Et puis en plus, je ne sais pas l'adapter tout gérer une image ...

J'ai bien cherché sur Google mais je ne trouve rien sur le chargement des images en AJAX ...

Merci d'avance

[dingoth]

Le code suivant devrait aider :

Code :

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
 // Ce code prend toutes les images qui sont définies dans un <IMG/>
document.onload=function() {
  // récupération de toutes les balises <IMG>
  var imgs = document.getElementsByTagName("img");
  for (var i = 0; i < imgs.length; i++) {
    var img = imgs[i];
 
    // récupération de l'url d'une image
    var url = img.src;
 
    // Affichage d'une image par défaut à cet endroit.
    img.src = "http://domaine.tld/image/attente.gif";
 
    // Création d'une image invisible
    var img2 = new Image();
 
    // Lorsque l'image invisible sera complètement chargée, on remplacera l'image de remplacement par l'image qui devait s'y trouver à l'origine.
    img2.onload = function() {
      img.src = url;
    };
 
    // Chargement de l'image invisible.
    img2.src = url;
  }
}

Par contre, y'a rien d'ajax ici. C'est du pur JavaScript : pas besoin d'AJAX du tout.

Bien sûr, ce code doit être adapté pour :
1. charger uniquement les images souhaitées (distinctibles avec une classe, par exemple) ;
2. ne pas empiéter sur le document.onload d'un autre script.

Pour t'aider dans cette tâche, je te conseille d'utiliser un framework AJAX (pour ses fonctionnalités JavaScript) comme JQuery ou Prototype.