Getting the size of a image after it is cloned and resized using jQuery
<p>I'm trying to write some jQuery code that gets the combined width of images that have been cloned and resized before they are shown, the problem is that before they are added to the DOM the width is always 0.   </p>

<pre><code>(function($){
    var $images = createDiv(),
        totalWidth = 0;

    //loop through a list of images
    $("#images &gt; li &gt; img").each(function(){
        var $this = $(this),
            $img = $this.clone(); //createa  duplicate of the images

        $img.height(100); //resize each duplicate to a set height

        totalWidth += $img.width(); //always equals zero

        //this always results in 0 too 
        //totalWidth += $img.get(0).clientWidth; 

        //add the cloned image to the div
        $images.append($img);

        //remove full sized image to reattach later
        $this.remove();
    });

    $images.hide();

    $("body").append($images);

    $("#show").on('click',function(){
        $images.show();
    });

    function createDiv(){
        return $('&lt;div id="imgs"&gt;&lt;/div&gt;');
    }
}(jQuery));
</code></pre>

<p>Here is a fiddle of a complete example: <a href="http://jsfiddle.net/bittersweetryan/9c3SH/2/" rel="nofollow">http://jsfiddle.net/bittersweetryan/9c3SH/2/</a></p>

<p>How can I get the total combined width of the resized images before they are added to the DOM?</p>
