tags:

views:

19

answers:

0

I have a bit of a problem that I have just found, after I thought this project had finished. It worked perfectly on my local server but when I pushed the code live the images can take half a second to load properly causing a little page thumbnail to pop up over a loading image. grrr

alt text

So whats happening? Well first off a function runs on window.load which created a large number of list items with a loading gif as the bg image.

Then this function pops an <img> tag into the first list item, with an onload which calls a second function

This second function cycles through an XML file and wraps the URL in the xml in an <img> tag and puts it in the next empty LI. this is where the problem lies. At the moment it puts the <img src=$variable onload=loadnextimage() /> into the List item before it has actually loaded.

My code:

$(window).load(function() {
            txt="";
            for(d=0;d<100;d++)
            {
                txt=txt + "<li class='gif' id='loading"+d+"'></li>"; 

            }
            document.getElementById('page-wrap').innerHTML=txt;
            document.getElementById('loading0').innerHTML="<img src='images/0.jpg' onLoad='loadImages(0)' />";
        });
        function loadImages(i){ 
            i++
            $.ajax
            ({
                type: "GET",
                url: "sites.xml",
                dataType: "xml",
                async: "true",
                success: function(xml) 
                {
                    var img = $(xml).find('image[id=' + i + ']'),
                    id = img.attr('id'),
                    url = img.find('url').text();
                    $('#loading'+i).html('<img src="'+url+'" onLoad="loadImages('+i+')" />').hide();
                    $('#loading'+i).fadeIn();
                }
            });
        }

I have a feeling it may be quite tricky achieving this how I have it set up, and I have a feeling i may need to create an img object and wait for that to load???

Once the page is cached the loading obviously works fine but its a bit of a pain ont he first load so i need to fix this. any advise welcome :) thanks