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 に答える