Question

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!

Answer 1

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