title: Ajax loading images in XML - loading image and fade?
body: <p>I am loading in an XML document with multiple photos in it, via ajax.
  The process my function goes through is this:</p>
  
  <p>Open a UL<br>
  Open a LI<br>
  Open an img tag<br>
  set the src to = the url in the xml document (see below)<br>
  close img tag<br>
  close LI<br>
  open a LI<br>
  open an img tag<br>
  set the src to = the url in the xml document (see below)<br>
  close img tag<br>
  close LI<br>
  close UL</p>
  
  <p>It creates a new List item and puts the img tag inside for each individual tag in the xml document.<br>
  And the xml is this, but with more entries:</p>
  
  <pre><code>&lt;images&gt;&lt;image&gt;&lt;url&gt;0.jpg&lt;/url&gt;&lt;/image&gt;&lt;image&gt;&lt;url&gt;1.jpg&lt;/url&gt;&lt;/image&gt;&lt;/images&gt;
  </code></pre>
  
  <p>and a snippit of my function that deals with the image src is  </p>
  
  <pre><code>for (i=0;i&lt;x.length;i++)
        {
        txt=txt + "&lt;li&gt;";
        xx=x[i].getElementsByTagName("url");
          {
          try
            {txt=txt + "&lt;img class='fade' src='" + xx[0].firstChild.nodeValue + "' /&gt;";
      }
          catch (er)
            {txt=txt + "&lt;li class='fade'&gt;&lt;img src='images/ajax-loader.gif' /&gt;&lt;/li&gt;";}
          }
    txt=txt + "&lt;/li&gt;";
        }
  </code></pre>
  
  <p>My question is, how do I make these fade in once they have been loaded? and how should i go about adding the loading.gif's behind? I was thinking of a simliar function that writes image tags with loading.gif as the src, then in the function above getting each element by id and changing the src. gonna give this a go, any other soltions welcome. But mainly i need to work out howo to fade this bad boy.</p>
  
  <p>thanks</p>