Ajax loading images in XML - loading image and fade?

Question

I am loading in an XML document with multiple photos in it, via ajax. The process my function goes through is this:

Open a UL
Open a LI
Open an img tag
set the src to = the url in the xml document (see below)
close img tag
close LI
open a LI
open an img tag
set the src to = the url in the xml document (see below)
close img tag
close LI
close UL

It creates a new List item and puts the img tag inside for each individual tag in the xml document.
And the xml is this, but with more entries:

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

and a snippit of my function that deals with the image src is

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>";
      }

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.

thanks

Answer 1

Hi,

Add the images with:

 style="display:none;"

And then when your function finishes adding the images call jquery fade:

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

Answer 2

As aviv says, you should set the display: none at first, because .fadeIn animates the opacity of image from it's current state to 100%.

And what about loading.gif.

there are many ways you can go, for example at firts you can set the src of each image to loading.gif, and then, after ajax request, you will change the src to your image. in this case you should set display: none before changing each src.

Or you can have other img elements(as loadings) with position absolute for example. In this case you should change their style to display: none after ajax request.

happy coding;)

Answer 3

---

   *Upate*

---

Hi, thanks for the answers but I am still racking my brain over this problem. basically i can get each part to work seperatly, but not all together.

The problem I cannot get my head around is this:
To be able to fade the image ontop of the loading.gif, the gif needs to be a bg image.
To load the images, an ajax request is needed and images are only loaded on the page once they have successfully loaded via ajax.
I need the loading.gif's to load with the page, which means I have to set up a blank structure of 100 LI's on the page.
I can then use .html() to insert the <img src=[url from xml file] /> into the LI.. yes? But the problem I am having is that the page freezes while it is doing this and it loads all the images at once as opposed to one at a time.

So I thought, create a function that each img can run onload, which starts the ajax script to get the next image to load.
I don't think this is great. And I am having a problem writing the function.
Theory of it goes:

image0 loads and fades in,
image0 completes loading and activates loadNext()
In loadnext() : the id is increased, (which is an attr in the xml starting 0 to 100)
get the url (which is an element in xml) relevant to the new id
add to the unordered list, and run loadNext() on image1 onload.

I cant get it to work though :( help please