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
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