Getting the size of a image after it is cloned and resized using jQuery

Question

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.

(function($){
    var $images = createDiv(),
        totalWidth = 0;

    //loop through a list of images
    $("#images > li > 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 $('<div id="imgs"></div>');
    }
}(jQuery));

Here is a fiddle of a complete example: http://jsfiddle.net/bittersweetryan/9c3SH/2/

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

Answer 1

You first need to append the image to the DOM, for it to have a width attribute, as an unattached DOM node it has no 'physical' properties. With that said, I suggest this:

(function($){
    var $images = createDiv(),
        totalWidth = 0;

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

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

        /* the call to css() is to make sure the created image isn't visible
           in the window. */

        $img.css(
            {
                'position': 'absolute',
                'left' : -10000 + 'px',
            });

        /* appending the element to the body */

        $img.appendTo($('body'));

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


        /* just to be sure... */

        console.log(totalWidth);

        /* *moving* the created image from its previous place off-screen,
           and removing also the 'position: absolute;' so that it's visible */
        $img.css({'position' : 'static'}).appendTo($images);

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

    $images.hide();

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


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

    function createDiv(){
        return $('<div id="imgs"></div>');
    }
}(jQuery));

JS Fiddle demo .