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?
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
my script:
nImages = $('.slide').length; loadedImgs = 0; var bgImages = ['img/bbb.png','img/bbb2.png'];
$('.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); }
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
the link to the loader script http://www.zhereicome.com/experiments/statics/myascensor/js/loader.js