Loading several images with a callback()
<p>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.</p>

<p>The problem is that the container keeps showing before they all are loaded.</p>

<p>Here is the simplified snippet i extracted from my script:</p>

<pre><code>// $('#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 &lt; i.length; i++){
    var url = imgs[i];
    $('#thumbScroller').append('&lt;img src="' + url + '" class="thumb" /&gt;');

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

        });
    }

}
</code></pre>

<p>Any help would be appreciated!</p>
