1

XML から取得した水平方向の画像のページを作成しています。画像が読み込まれると、画面の高さから小さな値を差し引いたスペースが確保されます。画像の幅を取得しているので、それらを合計して div コンテナーの幅を設定できます。現時点では、合計幅はサイズ変更されていない完全な画像のサイズであり、最後の画像の最後に空白スペースが残ります。サイズ変更されたすべての画像の幅を取得するにはどうすればよいですか?

これが私のコードです

 <script>

 $(document).ready(function () {
$.ajax({
    type: "GET",
    url: "xml.xml",
    dataType: "xml",
    success: xmlParser
});

 });

function xmlParser(xml) {
var $heightb = $(window).height() - 45;
var $widthb = 0;
$(xml).find("image").each(function () {
    $url = $(this).attr("url");
    $(".main").append('<div class="image" style="height='+$heightb+'px"><div class="title"><img height="'+$heightb+'px" src="' + $url + '" title="' + $(this).attr("desc") + '" /></div><div class="description">' + $(this).attr("desc") + '</div></div>');
    $(".image").fadeIn(1000);
    $widthb += $(".image").width();
});
$(".main").css('width', $widthb);
}

私が取り組んでいるページはhttp://www.spitznagel.ch/mobile.phpです

4

1 に答える 1

1

おそらく、各画像の要素を作成し、追加する前にそのサイズを取得できます。このようなもの（テストされていないコード。うまくいけば、アイデアが得られます）

function xmlParser(xml) {
    var $heightb = $(window).height() - 45;
    var $widthb = 0;
    var imgDiv;
    var width;

    $(xml).find("image").each(function () {
        $url = $(this).attr("url");
        imgDiv = $('<div class="image" style="height='+$heightb+'px"><div class="title"><img height="'+$heightb+'px" src="' + $url + '" title="' + $(this).attr("desc") + '" /></div><div class="description">' + $(this).attr("desc") + '</div></div>');
        $(".main").append(imgDiv);
        width = imgDiv.width();
        imgDiv.fadeIn(1000);
        $widthb += width;
    });
    $(".main").css('width', $widthb);
}
于 2013-01-24T21:35:56.403 に答える