Ajax chargement des images en XML - chargement de l'image et fondu?

Question

Je charge dans un document XML avec plusieurs photos, via ajax. Le processus ma fonction passe par est la suivante:

Ouvrir une UL
Ouvrez une LI
Ouvrir une balise img
défini src à = l'URL dans le document XML (voir ci-dessous)
Fermer tag img
Fermer LI
ouvrir un LI
ouvrir une balise img
défini src = à l'URL dans le document XML (voir ci-dessous)
Fermer tag img
fermer LI
fermer UL

Il crée un nouvel élément de liste et place la balise img à l'intérieur de chaque balise individuelle dans le document xml.
Et le xml est, mais avec plus d'entrées:

<images><image><url>0.jpg</url></image><image><url>1.jpg</url></image></images> 

et un snippit de ma fonction qui traite de la src image est

for (i=0;i<x.length;i++) 
     { 
     txt=txt + "<li>"; 
     xx=x[i].getElementsByTagName("url"); 
     { 
     try 
      {txt=txt + "<img class='fade' src='" + xx[0].firstChild.nodeValue + "' />"; 
    } 
     catch (er) 
      {txt=txt + "<li class='fade'><img src='images/ajax-loader.gif' /></li>";} 
     } 
    txt=txt + "</li>"; 
     } 

Ma question est, comment puis-je faire ces fondu en une fois ils ont été chargés? et comment devrais-je aller ajouter le loading.gif derrière? Je pensais à une fonction simliar qui écrit des tags d'image avec loading.gif comme src, puis dans la fonction ci-dessus obtenant chaque élément par id et changeant le src. Je vais essayer, toutes les autres propositions sont les bienvenues. Mais surtout, je dois trouver un moyen de faire disparaître ce mauvais garçon.

grâce

Answer 1

Ajoutez les images avec:

style="display:none;" 

Et puis, quand votre fonction se termine en ajoutant les images appellent jquery fondu:

$('img').fadeIn('slow'); 

Answer 2

Comme dit aviv, vous devez définir le display: none Au début, parce que .fadeIn anime l'opacité de l'image de son état actuel à 100%.

Et qu'en est-il de loading.gif.

Il y a plusieurs façons vous pouvez aller, par exemple à firts vous pouvez définir la src de chaque image à loading.gif, puis, après la demande ajax, vous changerez le src à votre image. dans ce cas, vous devez définir display: none avant de changer chaque src.

Ou vous pouvez avoir d'autres éléments img (comme des chargements) avec une position absolue par exemple. Dans ce cas, vous devez changer leur style en display: none après une requête ajax.

codage heureux;)

Answer 3

---

*Upate* 

---

Salut, merci pour les réponses, mais je creusais toujours mon cerveau sur ce problème. fondamentalement je peux obtenir chaque partie pour travailler séparément, mais pas tous ensemble. Le problème que je n'arrive pas à comprendre est le suivant:
Pour pouvoir faire disparaître l'image après le chargement.gif, le gif doit être une image bg.
Pour charger les images, une requête ajax est nécessaire et les images ne sont chargées sur la page qu'une fois qu'elles ont été chargées avec succès via ajax.
J'ai besoin du chargement.gif pour charger avec la page, ce qui signifie que je dois mettre en place une structure vierge de 100 LI sur la page.
Je peux alors utiliser .html() pour insérer le <img src=[url from xml file] /> dans le LI .. oui? Mais le problème que je suis est que la page se fige pendant qu'il fait cela et il charge toutes les images à la fois par opposition à une à la fois.

J'ai donc pensé créer une fonction que chaque img peut exécuter onload, ce qui lance le script ajax pour charger l'image suivante.
Je ne pense pas que ce soit génial. Et j'ai un problème pour écrire la fonction.
Théorie de celui-ci va:

charges Image0 et disparaît dans,
image0 achève le chargement et active loadNext()
Dans loadnext(): l'id est augmentée, (qui est un attr dans le fichier XML à partir de 0 à 100)
obtenir l'URL (qui est un élément en XML) pertinent pour le nouvel ID
ajouter à la liste non-ordonnée, et exécutez loadNext() sur on1 image.

Je ne peux pas le faire fonctionner si :( aide s'il vous plaît

Answer 4

patches ne fonctionnera pas sur drupal, cependant module cdn travaille avec Pressflow

Essayez ceci:.

themname_template_preprocess_page(){ 
    //regular expression for CDN call 
}