Images preloader

[JoniGiuro]

Hi, I’m creating a big page with a lot of blocks containing big background images, so I thought the best thing would be to show a preloader and load images in the background and update the loader (image 4 of 20, ecc).
My problem is: when the onload event fires my loader diasppears but I still see the image loading, this means it wasn’t completely loaded. Why does this happen? any idea?

here’s the page:

http://zhereicome.com/experiments/statics/myascensor/#1-1

Thanks in advance

[JoniGiuro]

my script:

nImages = $(‘.slide’).length;
loadedImgs = 0;
var bgImages = ;

$(‘.slide’).each(function(i){
var curSlide = $(this);
var img = new Image();
img.src = bgImages[ i % 2 ];
img.onLoad = imageLoaded(img, curSlide);
})

function imageLoaded(img, curSlide){
curSlide.css(‘backgroundImage’, ‘url(‘ + img.src + ‘)’);
loadedImgs++;
if(nImages == loadedImgs){
$(‘#container’).css(‘visibility’,’visible’);
$(‘#loader-cont’).fadeOut(1000);
}
$(‘.loader-inner .title’).text(loadedImgs / nImages);
}

[JoniGiuro]

Ok, I solved it on my own with some hard work. If someone’s interested, here’s the link:
http://zhereicome.com/experiments/statics/myascensor

[JoniGiuro]

the link to the loader script
http://www.zhereicome.com/experiments/statics/myascensor/js/loader.js

[Author]

Posts