Fade in multiple images in secquence once they have loaded

Question

Hi there,

What I am trying to achieve is a grid of images (10x10) that firstly load after the rest of the page has finished loading, and secondly fade in 1 after another

i.e. (represents only one line)

----------
+---------
++--------
+++-------
++++------

etc... What I have so far is this:

<script type="text/javascript">
var loadingImage = false;
function LoadImage(imageName,imageFile)
{
  if ((!document.images) || loadingImage) return;
  loadingImage = true;
  if (document.images[imageName].src.indexOf(imageFile)<0)
  {
    document.images[imageName].src = imageFile;
  }
  loadingImage = false;
}
LoadImage('0','images/0.jpg');
</script>

With this image tag

<img class="fade" name="0" onLoad="LoadImage('1','images/1.jpg')" />

This gives me half the solution in as much as it loads all the images in sequentially, but I cant seem to add a fade to these images. The images are set up in an UL with 10 pictures in each LI, and 10 LI's in total = 100 images.

How can I fade these in? Also is there a way to print out all the images in a loop insted of having them manually written in, so the user doesnt have to go through and make sure every image tag is correctly named? (ive already got a batch image renamer)

I found This which is similar to what I need, but I couldnt work out how to get it to load the way I want. Thanks

Answer 1

Instead of what you have, you can do this, keep the markup simple:

<img class="fade" name="0" src="images/1.jpg" />

Then in your CSS just have them hidden initially:

.fade { display: none; }

Then on page load all the script you need to show them sequentially is this:

$(window).load(function() {
  $(".fade").each(function(i) {
    $(this).delay(400*i).fadeIn();
  });
});

window.onload as opposed to document.ready waits until all images are loaded as well, so just use that event for your .fadeIn() code. The default duration of any animation is 400ms, and in a .each() loop i is the index (0-based) of the element, so the first image fades in instantly (once all are loaded), the second is delayed 400ms (via .delay()), so it fades when the first is done, the third after that, etc. If you want to fade slower, say 1 second each, just pass that to both functions, like this:

$(this).delay(1000*i).fadeIn(1000);

Answer 2

Right I'm afraid I need to open this up again. What I had before was not really doing what I needed it to do. I still need the same effect of the images fading in one after another. But insted of each one fading in with a delay what I need help with is this:

All the images are in an xml file. ajax loads in the images from this file. While it is doing so, the 10x10 grid is full of loading.gif animations. Once the first image has loaded, the gif dissapears followed by the image fading in. And as soon as the second image has loaded, the same thing happends untill all images have been displayed.

What I want my xml to look like is:

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

Then basically, for each element in the xml, either:
create a new Image() object with the appropraite url as the src...

Or have the grid set up in the html (UL, Li, and IMG tags where the original src=images/loading.gif and when the image is loaded the src is changed.)

oh yeah and add a fade to this.

What i have at the moment, ajax wise:

function ajaxLoader(url,id)
{
    if (document.getElementById) {
        var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
        }
        if (x)
            {
        x.onreadystatechange = function()
                {
            if (x.readyState == 4 && (x.status == 200 || !/^http/.test(location.href)))
                    {
                    el = document.getElementById(id);
                    el.innerHTML = x.responseText;
                }
                }
            x.open("GET", url, true);
            x.send(null);
            }
    }

and html wise:

<input type="button" onclick="ajaxLoader('images.xml','contentLYR')" value="Load Images..." /><div id="contentLYR"> </div>

and finally my current xml (which i coppied off a website):

<images>  <img class="fade" name="0" src="images/0.jpg" />  <img class="fade" name="1" src="images/1.jpg" />  </images>

This is happily fetching the xml and displaying it (not properly functional as im still testing things)

could somebody point me in the right direction please, like how my xml should be set up and what route I should carry down. ive read loads already on other websites but can't really find anything that helps me.

appreciated, thanks