Grow your CSS skills. Land your dream job.

Images preloader

  • # October 29, 2012 at 12:28 pm

    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:

    Thanks in advance

    # October 29, 2012 at 12:29 pm

    my script:

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

    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 + ‘)’);
    if(nImages == loadedImgs){
    $(‘.loader-inner .title’).text(loadedImgs / nImages);

    # October 30, 2012 at 11:16 am

    Ok, I solved it on my own with some hard work. If someone’s interested, here’s the link:

    # October 30, 2012 at 11:32 am

    the link to the loader script

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".