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:

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

    Thanks in advance

    # October 29, 2012 at 12:29 pm

    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);
    }

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

    http://zhereicome.com/experiments/statics/myascensor

    # October 30, 2012 at 11:32 am

    the link to the loader script

    http://www.zhereicome.com/experiments/statics/myascensor/js/loader.js

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