Question

我正在尝试编写一些jQuery代码来获取已经克隆并调整大小的图像的组合宽度，问题是在将它们添加到DOM之前，宽度始终为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));

这是一个完整示例的小提琴：http://jsfiddle.net/bittersweetryan/9c3SH/2/

如何在调整大小的图像添加到DOM之前获得已调整大小的图像的总宽度？

Answer 1

首先需要将图像附加到DOM，因为它具有width属性，作为未连接的DOM节点，它没有“物理”属性。话虽如此，我建议：

(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

在使用jQuery克隆和调整图像大小后获取图像的大小

1 个答案: