2

我正在尝试获取使用css百分比值缩放的图像元素的尺寸(宽度)。

这是代码:

<div id="wrapper">
                    <ul id="gallery_content">
                        <li><img src="images/thumbs/1.jpg"/></li>
                        <li><img src="images/thumbs/2.jpg"/></li>
                        <li><img src="images/thumbs/3.jpg"/></li>
                        <li><img src="images/thumbs/4.jpg"/></li>
                        <li><img src="images/thumbs/5.jpg"/></li>
                        <li><img src="images/thumbs/6.jpg"/></li>
                        <li><img src="images/thumbs/7.jpg"/></li>
                        <li><img src="images/thumbs/8.jpg"/></li>
                        <li><img src="images/thumbs/9.jpg"/></li>
                        <li><img src="images/thumbs/2.jpg"/></li>
                        <li><img src="images/thumbs/3.jpg"/></li>
                        <li><img src="images/thumbs/4.jpg"/></li>
                        <li><img src="images/thumbs/5.jpg"/></li>
                        <li><img src="images/thumbs/6.jpg"/></li>
                        <li><img src="images/thumbs/7.jpg"/></li>
                        <li><img src="images/thumbs/8.jpg"/></li>
                        <li><img src="images/thumbs/9.jpg"/></li>
                        <li><img src="images/thumbs/2.jpg"/></li>
                        <li><img src="images/thumbs/3.jpg"/></li>
        </ul>
    </div>

这里是CSS:

ul#gallery_content li{ background:#FFF; list-style:none; display:inline; float:left; margin:0; height: 100%;}
ul#gallery_content li img { width:auto; height:100%; width:auto; }

我正在尝试获取包装元素的实际宽度(所有图像宽度的总和)。在访问它们时

$(document).ready(
    galItems = $('#gallery_content').children().children();
    galSize = 0;
    $.each(galItems, function(index, item){
        galSize += parseInt(item.width)
    });     
)

它获取所有图像元素,但没有得到计算出的宽度。有没有机会用 jquery 获得图像的实际渲染宽度?

4

2 回答 2

0

您是否尝试过 .width() 作为函数?

http://api.jquery.com/width/

galSize += parseInt(item.width());

问题解决后编辑:

原来问题实际上是在页面之前执行了 javascript 并且图像已完全加载。

这是通过将 $(document).ready() 更改为 $(window).load() 来解决的。

于 2011-11-21T10:51:26.800 回答
0

如果ready()您应该传递一个函数,那么将您的代码包装在一个函数中,如下所示:

$(document).ready(function(){
    var galItems = $('#gallery_content').children().children();
    var galSize = 0;
    $.each(galItems, function(index, item){
        galSize += +(item.width)
    });
});

使用+符号而不是parseInt将字符串转换为数字,它更快。

于 2011-11-21T13:07:25.357 回答