CODEWITHSUNDEEP
javascriptjquery
Pierre
Pierre

Reputation: 19071

Loading several images with a callback()

I am looking for a way to load several hidden thumbnails on a page (around 500), calculate their total widths, and show their container once they are all loaded.

The problem is that the container keeps showing before they all are loaded.

Here is the simplified snippet i extracted from my script:

// $('#thumbScroller') is the container, and is initially hidden.

var imgs = ['http://www.google.com/images/nav_logo95.png', 'http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4'];

for(var i = 0; i < i.length; i++){
    var url = imgs[i];
    $('#thumbScroller').append('<img src="' + url + '" class="thumb" />');

    // all elements were appened at this point
    if(i == $this.totalImages-1 ){

        //variable to hold total container width
        var totalContent=0;

        // loop through images to calculate total width
        $('#thumbScroller img').each(function (s) {
            totalContent += $(this).width();

            //last image, show interface elements
            if(s == $('#thumbScroller img').length-1){
                $('#thumbScroller').width(totalContent).fadeIn();
            };

        });
    }

}

Any help would be appreciated!

Upvotes: 1

Views: 108

Answers (2)

tvanfosson
tvanfosson

Reputation: 532435

Because a hidden element does not have width, you need to move the element "off page" while you are performing your calculations, then move it back when done. Note, if you can't move the container, you could add the images to a different container that is "off page" while you calculate the widths, then move them into the original container when done.

var imgs = ['http://www.google.com/images/nav_logo95.png', 'http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4'];

$('#thumbScroller').css({position: 'absolute', left: '-99999px'});

for(var i = 0; i < i.length; i++){
    var url = imgs[i];
    $('#thumbScroller').append('<img src="' + url + '" class="thumb" />');

    // all elements were appened at this point
    if(i == $this.totalImages-1 ){

        //variable to hold total container width
        var totalContent=0;

        // loop through images to calculate total width
        $('#thumbScroller img').each(function (s) {
            totalContent += $(this).width();

            //last image, show interface elements
            if(s == $('#thumbScroller img').length-1){
                $('#thumbScroller').width(totalContent);
                $('.loader').removeClass('visible');
                $('.interface').removeClass('hidden');
            };

        });
    }

}


$('#thumbScroller').css({position: '', left: ''});

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

for(var i = 0; i < imgs.length; i++){
    var url = imgs[i];
    $('#thumbScroller').append('<img src="' + url + '" class="thumb" />');
}
var imgCount = $('#thumbScroller img').length;
var totalContent=0;
$('#thumbScroller img').load(function() {
    if (!--imgCount) {
        $('#thumbScroller').width(totalContent);
        $('.loader').removeClass('visible');
        $('.interface').removeClass('hidden');
    } else {
        totalContent += $(this).width();
        console.log('continue...');
    }
});

Upvotes: 1

Related Questions